Creating a website navigation bar with CSS

89

There are many ways to create a navigation bar, you can use a programs like Photoshop and then convert the image into code, but when I see people creating them in Photoshop I think why bother? When you can simply use CSS for the whole creation and code of it. Granted Photoshop can be used in other development tasks such as designing a full website template. But in this tutorial I will show you how to create a very clean navigation bar using CSS and nothing else (Well HTML too but CSS for the majority!)

Step 1: Prepare your documents!

Before we even begin to creat the navigation bar make sure you have one XHTML document open with the basic structure within it (e.g html, head and body tags) and name it navigation.html. Also open blank CSS Document (You can do this in any text-editor just save the document as navigation.css and it will automatically become a stylesheet)

Coming back to our XHTML document (Making sure you have the basic structure of it placed in add this code between the head tags of your XHTML document:

<link rel="stylesheet" href="navigation.css" type="text/css" />

Because we are planning to add in the CSS parts into a seperate stylesheet document this code will be needed so that the stylesheet document’s code is included into the XHTML.

Step 2: Applying the only XHTML code we need

Hopefully this tutorial will show you, how simple a navigation bar can be made and how you don’t need to be making loads of div’s and placing loads of XHTML code to make one. The only div that we need to actually add into the XHTML is the navigation div. So add this bit of code between the body tags of your XHTML document:

<div id="navigation">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>
<a href="#link5">Link 5</a>
</div>

Note: Do not change the div name, otherwise the structure of the CSS we are about to create will not be the same as the div name applied in XHTML. I’d recommend you don’t change it as the div is leading off many divs that are also named the same with anchor attributes in there name. You’ll see what I mean during the CSS part

Step 3: The main navigation div

You can now save your XHTML document and leave it closed now as thats the only XHTML we will need. We shall now start creating the CSS for the navigation. Open up the navigation.css document and add in this first part:

#navigation{
height:50px;
width:100%;
background-image:url(navigation-bg.jpg);
font-family: sans-serif;
background-repeat:repeat;
}

Note: Ignore the image file for now. It will be avaliable for you to download at the end of the tutorial.

What we have here is the main div of the navigation. This div basically sets what the size/height of the navigation bar will be as well as the background. This is really the body of the navigation bar.

Step 4: The important anchor div

We have the main div but we also need to create a div that will control the anchor tag’s placed in our XHTML like so:

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>
<a href="#link5">Link 5</a>

Referring back to one of my tutorials on defining XHTML tags in CSS, you’ll notice that the anchor tag is one of the examples. This tutorial will be using some of that knowledge, so if you want to go over to the other tutorial and check that out before pressing on, please do so:

http://blog.jmwhite.co.uk/2008/08/29/common-xhtml-tags-defined-in-css/

So now that we have the main div, we will now create the main anchor div in our CSS, add this into the CSS document below the main navigation div:

#navigation a{
padding:15px;
float:left;
color:#999999;
text-decoration:none;
border-right:1px solid #333333;
}

A couple of things to point out here. Notice how the div name still includes the main div name but then has a additional character at the end of it? This is infact the anchor tag being defined in CSS, and that would be how you define it.

Another key point is the fact of the float attribute is suddenly being defined in the anchor div. This attribute is very important and without it the navigation links will fall apart and never work. It’s important as it’s being used to position the links, and positioning is very important. At the moment the links are going to be positioned from left to right, however you could also change it to:

float:right;

To make all the navigation links go from right to left. But for this tutorial we’ll be keeping it left.

Step 5: Defining more anchor attributes

We have now essentially finished the main parts of the CSS, we now have the main navigation div and the main anchor div in the CSS. However to make this navigation bar interesting we’ll be defining two more anchor tags in the CSS, so we give the navigation bar a good feel to it.

Under the main anchor div in our CSS place this code below it:

#navigation a:hover{
background-color:#000000;
color:#FFFFFF;
padding:15px;
}

This additional anchor div will give us some functionality over our navigation bar and allow it to become interactive. This div has now made the navigation bar so when someone’s mouse hovers over a link the background colour of the link will change. In this case the colour is black. Also what makes this neat is that the colour of the text has been set differently to the colour of what links would be when someone’s mouse wasn’t hovering over them. So we have a darker colour when the links aren’t being hovered over and when they are the links become a lighter colour. It’s a neat effect that looks good!

Finally you may or may not want to set this final anchor div depending on what you think, I’ll show you what it is and you can choose if you want it or not. Basically we are going to be setting a different colour for the links that have been clicked on already. When a user clicks on a link it will recongise that it has been visited and a new colour of text will over-write any other text colour defined in our CSS. Place this final bit of code below our a:hover div:

#navigation a:visited{
color:#1158AF;
padding:15px;
}

This code will now change any already visited link to a different colour. The colour given will not change unless a person clears his/her’s browsers cache.

A final note regarding all of the anchor div tags, notice how the padding attribute in the CSS has been defined in each div, this is needed for the navigation links to align and work properly. Do not set them different to each other otherwise the navigation bar will be messed up.

And as promised here is the background image of the base of the navigation bar:

nav-bg

(Right click and save this image, and make sure you update the location of the image in the CSS if you place it somewhere differently)

Step 6: Seeing your navigation bar in action:

The moment you’ve all been waiting for! Let’s see the navigation bar in action:

Navigation bar normal state:
nav

Navigation bar link (Hover):
nav-hover

Navigation bar links (Visited):
nav-visited

And there we have a it a clean navigation bar, using mainly CSS to create.

Centering this navigation

I’ve been receiving a couple of comments and emails from people wanting to center this navigation. To do this you simply have to add in padding-left to the main #navigation div in the css. Something like this:

#navigation{
height:50px;
width:65%;
padding-left:35%;
background-image:url(navigation-bg.jpg);
font-family: sans-serif;
background-repeat:repeat;
}

If you want to center the navigation you need to remember that the padding-left will be added width onto 100% so if you left the width at 100% and set a padding left of 35% the width is going to be 135%. To solve the you share the 100% between the padding and the width, like shown in the example code above with a 65%-35%.

Note: The padding left is set in a percentage instead of pixels as percentage will allow the navigation to center correctly and scale on different screen resolutions, without affecting the alignment. Don’t use pixels. It won’t work!

Share This: