Vermillion's Simple Navbar Tutorial

Category: CSS, HTML
Reviewed by: Vermillion   
Reviewed on: Nov 24 2008
» Discuss this topic ( Posts)

Finally, we will just add the hover effects:

<style type="text/css">
 
/*Navbar*/
#navbar {list-style:none;}
 
#navbar li {display:inline;
                 float:left;}
 
#navbar li a {text-decoration:none;
                   padding:5px;
                   background-color:#336633;
                   color:#ffffff;
                   font-weight:bold;
                   font-family:Arial, Helvetica, sans-serif;}
 
#navbar li a:hover{background-color:#ffffff;
                            color:#336633;}
 
</style>
 
<ul id="navbar">
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
</ul>

The result:




And that's about it! You have now made your own little navbar. Feel free to modify it more from now and then. I will consider to work with a JavaScript navbar, but I am not sure if I will actually do it, so stick with this for now.