In this article going to discuss how to resize a navigation bar on scroll with the help of CSS and JavaScript. A navigation bar contains the list of elements present in your website; including the links to navigate through the website. It usually the first pit-stop for the users visiting the website who seek guidance to walk through the website. Resizing is the same as hiding and showing the navigation. Here, we just need to increase the padding, and size of the navigation bar with the help of JavaScript. In this example we are creating a webpage displaying “navigation bar”. ... Read More

To hide a navigation menu on scroll down with CSS and JavaScript, user should have basic knowledge of javascript conditional statement and CSS. We will be creating the navigation menu using HTML, style the navigation menu using CSS and use Javascript to hide navigation menu while scrolling down. We are having a navigation menu with textual content, our task is to hide the navigation menu while scrolling down. In this article, we will be implementing following steps to hide a navigation menu on scroll down with CSS and JavaScript: Creating Structure of Navigation Menu Using ... Read More

In this article we are going to discuss how to create a responsive bottom navigation menu with CSS and JavaScript. Usually once you create a web page, when you alter the size of the page, some of the contents of the page will be hidden. A responsive page is the one which adjusts the contents of the page as we change the dimensions of the page. To create a responsive navigation menu, we have to use CSS and JavaScript. The responsive menu resizes the browser menu to see how the navigation menu works on small and mobile−size displays. In short ... Read More

In this, article we are going to create off canvas menu using CSS and JavaScript. Off−canvas menu lets you display your content as a sidebar when a button is activated. This helps you to display a certain aspect of your site in the side navigation panel thus giving a user−friendly familiarity to your guests. An off−canvas menu can also be accessed by sliding left−to−right or right−to−left (if you are using a touchscreen device) depending on the design of your website. This is usually used in cases where a website has a lot of links that don’t fit in the top ... Read More

In this article, we are going to discuss how to create a full−screen overlay navigation menu with CSS and JavaScript. Overlay in Web applications is nothing but transposing one HTML element over other. We can overlay images, pages, text, etc. There are three ways to create a full−screen overlay navigation bar which are listed below. From the left side, From the top side, and No animation. There is no Direct way to create an overlay; you can overlay two HTML elements using the technologies specified above. Steps to create a full-screen overlay navigation menu Following are the steps ... Read More

Following is the code to create a responsive navigation menu with a login form inside of it −Example Live Demo Document body {    margin: 0px;    margin-top: 10px;    padding: 0px; } nav {    width: 100%;    background-color: rgb(39, 39, 39);    overflow: auto;    height: auto; } .links {    display: inline-block;    text-align: center;    padding: 14px;    color: rgb(178, 137, 253);    text-decoration: none;    font-size: 17px; } .links:hover {    background-color: rgb(100, 100, 100); } form {    float: right;    margin-top: 8px; } form input{    display: inline-block;   ... Read More

In this article, we will discuss how to change tabs on hover with CSS and JavaScript. Hover Tabs are the easiest way to access the content of other tabs without leaving the current tab. When you hover over a tab that is not currently open, the content inside it will be displayed in a small window. Let us suppose you are accessing the Google Chrome browser with two tabs: one tab with a blog and the other tab containing a social media network. When you hover over the tab with social media network tab while accessing the blog tab, the ... Read More

In this article, we will discuss how to create full-page tabs with CSS and JavaScript. Full-Page Tabs, like the name suggests, are tabs that are displayed on the entire page instead of a section. To create a full page tab, you need to set the height of the page to 100%. You can do this using the height property, i.e. you need to create a CSS class, then set the height to 100vh and set this class as a style class of the individual tab elements those you need with full page length. By creating full page tabs, we are ... Read More

In this article, we are going to discuss how to create tab headers with CSS and JavaScript. The header elements represent a container using some introductory content or with the set of navigation links. In general, header elements typically contain one or more elements. Tab headers represent the content present in each tab or provide some navigation links that links the user to any tab they click on. Steps to Create Tab Headers The steps to create a tab header using the JavaScript are given below − Define a function with two parameters evt and name. Declare the ... Read More

In this article, we will discuss how to create a vertical tab menu with CSS and JavaScript. Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user−friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive. There are several types of tabs which can be created and used in various cases − Horizontal tabs Horizontal with Secondary Tabs Frameless Horizontal Tabs Vertical Tabs Vertical Tabs with Second Tabs ... Read More