Vermillion's Simple Navbar Tutorial

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

Believe it or not, making this navbar uses three main tags: ul, li, and a (not counting the style tag for the CSS). This is when a lot a people get confused with. How can an unordered list become a navbar? With the magic of CSS, you can basically do everything.

To start off, copy and paste or write this code below. In my articles, you will be asked to copy exactly that, and I will explain everything with details below the code:

<style type="text/css">
 
/*Navbar*/
#navbar {}
 
#navbar li {}
 
#navbar li a {}
 
#navbar li a:hover{}
 
</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>

Here we set an unordered list, with the following (empty) CSS declarations:

#navbar {}: You remember that the "#" symbol is to specify an ID on the document, right? Well as you can see in the ul tag, we have an ID with the name "navbar", so "#navbar" will refer to that ul element. Remember that IDs are unique, so don't add another element with an "navbar" ID.

#navbar li {}: This points to everything that is inside the tag with the "navbar" ID. Yep, every li inside the #navbar ul will have the same traits.

#navbar li a {}: This points to all the 'a' tags that are inside li tags that are inside a element that has the 'navbar' ID. Yep, all the link tags insider the li tags inside the ul#navbar will have this traits.

#navbar li a:hover{}: Same as before, but for link effects, when the mouse hovers over them.

Once you have copied that code, you will have this:

Ugh, that doesn't look quite like a navigation bar, does it? Don't worry about it, it is just the first step, and we will make it look like a real navbar by only modifying the CSS for now on.