CSS Navigation Bar
Vertical Naviagation Bar
Horizontal Navigation Bar
Navigation Bar
Skilled useage of the navigation bar is very important for any website.
Using CSS you can create a nice navigation bar instead of a boring HTML menu.
Navigation Bar = list of links
As a standard HTML basis, a navigation bar is a necessary.
In our example we will create a standard HTML list navigation bar.
The navigation bar is basically a list of links, so it makes sense to use the <ul> and <li> elements:
Example
<ul> <li><a href="#home">Home page</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>
Now, let's remove margin and padding from the list:
Example
ul { list-style-type: none; margin: 0; padding: 0; }
Example analysis:
list-style-type:none - Remove the small flag in front of the list. A navigation bar does not need list markers
margin:0; padding:0 - Remove the default settings of the browser and set the margin and padding to 0
The code in the above example is the standard code used for vertical and horizontal navigation bars.
Vertical Navigation Bar
In the above code, we only need the style of the <a> element to create a vertical navigation bar:
Example
a { display:block; width:60px; }
Example description:
display:block - displays the link of the block element, so that the whole becomes a clickable link area (not just the text), it allows us to specify the width
width:60px - The block element is the maximum width by default. We want to specify a width of 60 pixels
Tip: See an example of a full-style vertical navigation bar.
Note: Be sure to specify the width of the <a> element in the vertical navigation bar. If you omit the width, IE6 may produce unexpected effects.
Vertical Navigation Bar Example
Create a simple vertical navigation bar instance, when the mouse moves to the option, modify the background color:
Example
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* Move the mouse to the option to modify the background color */ li a:hover { background-color: #555; color: white; }
Active Navigation Bar Element
After clicking the option, we can add the "active" class to standardize which option is selected:
Example
li a.active { background-color: #4CAF50; color: white; }
Create Links and Add Borders
You can add text-align:center style to <li> or <a> to center the link.
You can add a border attribute to the border <ul> to make the navigation bar have a border. If you want to add a border to each option, you can add border-bottom to each <li> element :
Example ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }
Fixed Position of Navigation Bar at Full Screen Height
Next we create a fixed navigation bar with full screen height on the left and scrollable content on the right.
Example
ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* Full screen height */ position: fixed; overflow: auto; /* If there are many options in the navigation bar, scrolling is allowed */ }
Note: This example also can be used on mobile devices.
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Use inline or float list items.
Both methods are good, but if you want to link to have the same size, you must use the floating method.
In-line List Item
One way to create a horizontal navigation bar is to specify elements. The above code is standard inline:
Example
li { display:inline; }
Example analysis:
display:inline - By default, the <li> element is a block element. Here, we delete each list item before and after the newline character to display one line.
Tip: Check example of the horizontal navigation bar style.
Floating list item
In the example above, the links have different widths.
For all links with equal width, float the <li> element and specify the width of the <a> element:
Example
li { float:left; } a { display:block; width:60px; }
Example analysis:
float:left - slides using floating block elements are next to each other
display:block - displays the link of the block element, so that the whole becomes a clickable link area (not just the text), it allows us to specify the width
width:60px - The block element is the maximum width by default. We want to specify a width of 60 pixels
Tip: Check the example completely style horizontal navigation bar .
Horizontal Navigation bar example
Create a horizontal navigation bar and modify the background color after moving the mouse to the option.
Example
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /*Move the mouse to the option to modify the background color */ li a:hover { background-color: #111; }
Try It!
Active Navigation Bar Element
After clicking the option, we can add the "active" class to standardize which option is selected:
Example
.active { background-color: #4CAF50; }
Link Right Alignment
Set the rightmost option of the navigation bar to right alignment (float:right;):
Example
<ul> <li><a href="#home">Home page</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right"><a class="active" href="#about">About</a></li> </ul>
Add Dividing Line
<li> Use border-right style to add dividing line:
Example
/* Add a dividing line for everything except the last option (last-child) */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }
Fixed Position of Navigation Bar
You can set the navigation bar of the page to be fixed at the head or bottom:
Fixed position to the head
ul { position: fixed; top: 0; width: 100%; }
Fixed position at the bottom
ul { position: fixed; bottom: 0; width: 100%; }
Note: This example can be used on mobile devices.
Horizontal Navigation Bar with Gray Background
Horizontal navigation bar with gray color
ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }
More Examples
Responsive top navigation - How to use CSS3 media queries to create a responsive navigation.
Responsive sidebar navigation - How to use CSS3 media queries to create a sidebar navigation.
Navigation drop down menu - Set the drop-down menu inside the navigation bar