Making a navigation bar in CSS
CSS is such a useful tool in designing your website and adding some functionality to it. One of the things that turns most “beginner web designers” on to CSS is the ability to customize the color of links. This is great to avoid having unwanted underlines and the ugly blue default link color. Well did you know you can create a very versitile navigation bar using CSS? It’s really quite easy: instead of applying effects to a piece of text – apply effects to a table cell! In this tutorial you will learn effects regaurding: hovering cell background effects, text effects, button effects, and more!
Step 1 – Creating the table:
The first thing we need to do is set up our table. I’ll make it easy for you and create a verticle, 5 collumn table. You can customize this table any way you’d like. You can convert it to 5 rows instead of five collumns if you prefer having a side bar.
Open up Notepad or a text editing decoder similar to notepad and create a basic HTML document with a table like so:
<html>
<head>
<title>Your Website Title</title>
</head><body>
<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Page 1</td>
<td>Page 2</td>
<td>Page 3</td>
<td>Page 4</td>
<td>Page 5</td>
</tr>
</table>
</body>
</html>
Again, you can modify this table in any way you need to. The only thing I suggest NOT modifying is the font, alignment, or size of the text – and do not be quick to add links to your navigation bar. We’ll cover this in the next step.
But first, be sure that you’ve saved your work. For now, save this document as “navigationbar.html” and continue saving your work after each step – just to be safe 
Step 2 – Making our links
Instead of using the common <a href=”http://yourwebsiteurl.com”> tag, we’re going to go a different route. Because we want the entire cell to act as a button or link, we need to modify the entire cell, not the text within it. To do this, we’ll add a function called “onClick” inside each <td> tag.
To do this and find each <td> tag and add this function: onClick=”document.location.href=’http://www.funkytower.com’;”
Now all your <td> tags should look like this:
<td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 1</td>
<td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 2</td>
<td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 3</td>
<td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 4</td>
<td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 5</td>
Change the URL to whatever you’d like it to be so that it fits the purpose of your navigation bar.
Step 3 – CSS Properties for each button
Now that we have a dull navigation bar with no style or beauty to it, let’s work on our CSS. Let’s first start by making our navigation bar look just how we want it. Paste this code somewhere between the <head> and </head> tags:
<style type=”text/css”>
.nav {
background-color:#990000;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
cursor: pointer;
}
</style>
Let’s break this down:
- .nav – This is the name of the class we will use. Change it to anything you want like “.navbar” or “.thebar” or “.thethingie”…what ever you want
- background-color – This, obviously, will be the background color of our cell. Change the color to whatever you’d like!
- font-family – This is your basic font for your text. There are different font-families you can use. Here are some common ones1. Verdana, Tahoma, Arial, Helvetica, sans-serif
2. Georgia, Times New Roman, Times, serif
3. Geneva, Arial, Helvetica, sans-serif
4. Arial, Verdana, Helvetica, sans-serif
5. Courier New, Courier, Verdana, sans-serifNow, you can go online and find more fonts families, but these here are the most common – so if I were you, I’d stick to one of these. - color – Simply put: the color of the text. Again, this can be anything you want.
- text-align – The alignment of the text. Chose left, right, center, or justify.
- cursor – This is what the cursor becomes when it is within the table cell. The “cursor: pointer;” property will help indicate that the cell is, in fact, a link to another webpage by showing
And it also will keep your cursor from turning into 
when hovering over the text in your navigation bar.
So now that we understand the basic properties of our CSS code, it’s time to add some effect to our navigation bar!
Step 4 – Adding Effect:
To do add a hover effect to your navigation bar, add the following code to your CSS style:
.nav:hover {
background-color: #CC0000;
}
“.nav:hover” indicates that we’re using the same properties as “.nav” except for the following properties (i.e, these are the properties that will change when we hover our mouse over the table cells in our navigation bar)
Note that the only property I’ve put here was the background color. You can use/change whatever property you’d like such as ”color” for text - just ommit the “cursor” property, as it won’t matter since we covered that in the previous CSS properties.
Step 5 – Implimenting the CSS to the Navigation Bar
This step is probably the easiest step. Simply add class=”nav” within your <td> tags. Now your ENTIRE HTML document should look something like this:
<html>
<title>Untitled Document</title>
<style type=”text/css”>
.nav {
background-color:#990000;
font-family: Helvetica, Arial, sans-serif;
color: #FFFFFF;
text-align: center;
cursor: pointer;
}
.nav:hover { background-color:#CC0000; }
</style>
</head><body>
<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 1</td>
<td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 2</td>
<td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 3</td>
<td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 4</td>
<td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 5</td>
</tr>
</table>
</body>
</html>
Step 6 – Save it and Test it!
Upload it to your server and test it out. Now you have a fully functional navigation bar done completely in CSS! Final thing to do is test it out!!!
Other Tips:
Now, this is totally optional, but I would reccomend adding your CSS to an external CSS document, rather than adding the entire CSS code to the head of your HTML document.
To do this, copy and paste all the CSS code (excluding <style type=”text/css”> and </style>) into a new notepad document and save it as style.css in the same location as your HTML document.
Now, open up your HTML document and replace ALL your CSS code, including the <style> tags, with this:
<link rel=”stylesheet” href=”style.css” type=”text/css” />
Now save your HTML document and test it.
What Do you Think?
Did this tutorial help you?? Got any other cool tips or tricks regaurding HTML/CSS? Need to know how to do anything else with CSS or HTML? Let me know and I would love to help you!!! You can e-mail me at david@funkytower.com and I’ll do everything I can to help you
Take it easy,
David Crandall
Tags: Bar, CSS, How To, HTML, Links, Navigation, Tutorial
December 14th, 2008 at 9:18 am
Dear david,
many thnks for the tutorial above. it was what i had been looking a quite some time!