How to make a decent navigation bar

A navigation bar is of course essential part of a website as it’s going to where all your links to the site are stored, so your obviously be going to needing one, and it’s also going to be need to look appealing. This tutorial will teach you how to make a navigation bar using only XHTML and CSS with no use of Javascript or any other code

Step 1: Creating the first CSS part

Before we do anything else we’re going to code the navigation bar’s CSS first, so make a new CSS document called navigation.css (This can be done in any program such as Notepad etc) and our first attribute will be called #navigation (So this will mean it’s doing to be a ID div when we add it into our XHTML page)

#navigation{
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(images/under-nav-bg.png);
position:absolute;
width:100%;
border:1px solid #FFFFFF;
height:90px;
}

Step 2: The only XHTML you need:

This is the base layer of our code navigation bar and would need to be opened in a div first otherwise following divs won’t be able to us the base code to display properly. I’d suggest now that you open a blank XHTML document and add in the basic XHTML structure tags such as head, meta etc.. Once you’ve done that add in this between your head tags:

<link rel="stylesheet" href="navigation.css" type="text/css" charset="utf-8" />

Take note of the navigation.css link rel. If you use this for your own website you will need to change that according to the CSS Stylesheet name you’ve named (If different to the example) and the directory it will be in.

Now add in this XHTML code between the body tags:

<div id="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Special Offers</a>
<a href="#">Content</a>
<a href="#">Links</a>
</div>

This is the only XHTML you will need to place in the XHTML, the rest is CSS Controlled

Step 3: The other CSS Parts

The final 2 CSS attributes we need to add in do not use divs as they are related to the anchor tag which is already been added on our XHTML as a link:

<a href="#">Home</a>

Go back to our navigation.css and add in this second css attribute:

#navigation a{
text-decoration:none;
float:left;
padding:15px;
font-size:16px;
color:#FFFFFF;
}

This is the CSS for controlling what the links will look like when the mouse pointer of someones mouse is not over any of the links, the colour can be changed by using a different hexdecimal colour other that #FFFFFF. Add this below your other CSS attribute on the navigation.css

Now our other part of anchor tag is this:

#navigation a:hover{
background-image:url(images/nav-button-bg.png);
padding:15px;
}

The CSS is controlling what the display of the navigation will look like when someone’s mouse moves over a link hence the hover attribute. Now I’ve been using two images for the tutorial and I bet you’ve been thinking where can I get my hands on them! Well here they are below (Make sure you right click and save them!:

When you download them I’d recommend you put them in a folder called images if you don’t change the image locations within the CSS, if you do put them in different folder update the CSS with the new image locations!

Okay so thats all of the stuff you need once we put it altogether you should get something like this: