CSS - Navigation bar

Build a navigation bar using CSS

If every time you enter a website, you think: "How did they made this navigation bar?". Then this is the right place to start.

Here is how you can build one. Start preparing the HTML code and style it using CSS

Normally to create a navigation bar (horizontal or vertical menu) the HTML lists are a good start point. You can then use CSS to give it some awesomeness. You will also use a link inside the li element. So let's give it a try:

HTML<ul>

   <li><a href="#">HOME</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">RSS feeds</a></li>
   <li><a href="#">Contact</a></li>

</ul>

We will now use CSS to style the above navigation bar. We will use list-style-type:none - to take out the bullets, for example. We will also reset the standard margin and padding.

CSSul {
   list-style-type:none;
   margin:0;
   padding:0;
}

The above CSS codecan be both used for vertical navigation menus and horizontal navigation bars.

CSS - Vertical navigation menu

To create a vertical navigation menu you just need to represent the links as a CSS block and set a fixed width of the block.

CSSa {
   display:block;
   width:100px;
}

***NOTE
Although setting the block width is not a must, we recommend you to do so, just to avoid some distortion in old browsers.

The above code is enough to create a vertical menu. Below we have a simple example of a full navigation menu, just to make yourself an idea of how things would look like. You can use your imagination and change colors as you like.

CSSul {
   list-style-type:none;
   margin:0;
   padding:0;
}

a:link,a:visited {
   display:block;
   font-weight:bold;
   font-size:20px;
   color:#fff;
   background-color:#d2691e;
   width:200px;
   padding:8px;
   text-decoration:none;
}

a:hover,a:active {
   background-color:#daa520;
}

HTML<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">RSS feeds</a></li>
   <li><a href="#">Contact</a></li>
</ul>

vertical navigation menu demo

CSS - horizontal navigation bar

To create an horizontal menu bar using CSS you can ether use the inline attribute, or the floating attribute to force the elements to be displayed all on one single line.

Using inline value

To create the horizontal navigation bar using the inline attribute, you will only need the next CSS code.

CSSli { display:inline; }

The default display mode for list elements is block. The inline value only resets that and shows all link elements on one line.

Using float attribute

By using the float attribute, you will force list element to float one besides the other. Additionally we will use the display:block; to make it a fixed width button.

And here is the CSS code.

CSSli { 
   float:left;
}

a {
   display:block;
   width:60px;
}

Please note that you must specify a width for the navigation button. In another case, the list element will occupy the full width and you will be in front of a full-width vertical navigation menu.

Here is an example for creating a simple horizontal menu bar using both display:inline and float properties.

horizontal menu bar demo