Vermillion's Simple Navbar Tutorial
Category: CSS, HTMLReviewed 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.