Vermillion's Simple Navbar Tutorial

Vermillion - 2008-11-20 08:31:35 in CSS, HTML
Category: CSS, HTML
Reviewed by: Vermillion   
Reviewed on: Nov 24 2008
6456

Navbars (Navigation Bars) are a basic element that most web pages have nowadays. At the same time, it can be quite tricky to make one, specially for people who are new to web development. It is one of the things that most people wonder how to make them, and at the end, it's not made the way they used to think it was! For that reason, I am writing this simple Navbar Tutorial, to help you get started.

To make the simple navbar, you need four things:

That's it! If you lack one of those, come back later >=(!

I suggest you follow this tutorial step by step before you ask any questions. But if you have any questions about my navbar tutorial, send me a private message on Devpen or on Neoseeker.

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.

This is the output from the last part:

Now it's time to put all of them in a line.

<style type="text/css">
 
/*Navbar*/
#navbar {list-style:none;}
 
#navbar li {display:inline;
                 float:left;}
 
#navbar li a {text-decoration:none;
                   padding:5px;}
 
#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>

list-style:none: With this, you will eliminate the small dots that appear at the left of every list element.

display:inline: Instead of creating automatic line breaks after every li element, this will collapse all of them in only one line.

text-decoration:none: I'm using it to get rid of the underlines on the links.

padding:5px: To 'expand' the links by 5 pixels, so they won't be too close to each other.

You should have the following result to this point:



It's time to decorate this navbar a bit. Feel free to experiment with more things here, like background images.

<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{}
 
</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>

background-color:#336633: Adding a green background color.

color:#ffffff: Adding white font to the text.

font-weight:bold: Will make the text bold.

font-family: Arial, Helvetica, sans-serif : Just adding a font style.

Everything I did here was to add some visual, pleasant effects =P.

Your result should be this:




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.