Have you ever wondered how to create Navigation Bars using pure CSS in Dreamweaver. Over the next few days I will be teaching you how to do just that. In this first article I will show how to easily create a Vertical Navigation Bar using some simple list styling techniques.

1. First thing first and let’s start with some great HTML framework.

2. In your CSS file the first thing I like to do is remove the bullets and set the margins to zero.

3. This step is an important one so read carefully and make sure you understand this one. We are going to style the anchor text rather than the list item itself. So we need to set the display property of the anchor to block, and then I am going to set the dimensions. In this case they are 100px wide by 20px high. Also note that to center the text vertically I have set the line height to 20px as well.

4. For the Rollover effect I am using an image that is 300px wide by 30px high which on rollover will change position.

This image is applied to the anchor link by adding the following code to the above code block, notice I am also indenting the text by 40px as well.

background:url(images/vertical_nav_back.png) no-repeat left center;
text-indent: 40px;

Now if you take a close look at the image, you will see that the image had a 1px border around it. Considering that these images are going to be stacked up vertically on top of each other the top and bottom borders will double up. To avoid this we need to take 1px off the height and line-height properties ending up with:

5. Where did the top border go? I hear you ask. Well we need to reset the height of the first link. To do this I applied a class of firstlink to the first link item.

li.first a{
height: 40px;
line-height: 40px;
}

Now we have a very stylish vertical navigation bar. To finish it off with a bit of class we need to create that rollover effect.

6. By simply adding the following to your CSS Style Sheet it will create that effect.

a:hover{
background-position: right bottom;
color: #fff;
}

There you have it a Vertical Navigation Bar created in Dreamweaver using nothing else but CSS. If you would like the source files that I used in this article then you can download them here.

Make sure you Subscribe To My RSS Feed so you don’t MISS the upcoming articles on How To Easily Create Navigation Bars using Dreamweaver and CSS

Social Media:

| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.