Navigation With Lists (Vertical)

Navigation With Lists (Vertical) On many sites you see very good looking navigations that you would think are probably quite difficult to make, well, in this tutorial I will show you just how simple it really is.

These navigations (like the one I use) are made using lists. Yes, you did hear me right I said lists. All examples for this tutorial are on external sheets which will open in new windows (no pop-ups).

Firstly we start with our list code, which if you read through my list tutorial you should already know how to make. The code is simple enough:

The HTML code will never change, the rest is edited purely using CSS. As this is your navigation it may be wise to put it inside a DIV of it's own, which I find makes things a whole lot easier.

So we can add the CSS to the DIV for our navigation. In your stylesheet (which you should have) start off by declaring an ID for our div.

#navigation { }

In my examples I have included the CSS in the head of the page so you can see it easily. Check out what we have so far in this navigation tutorial.

The next step is to include our ID on our div tag.

Like so! Now back to our CSS, what we should have now is a very ugly list ... lets fix that. Take our original ID and edit it accordingly.

#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

What this does is; gives all our UL tags no bullets (list image) and takes away all padding.

The next step is the display: block; attribute to the links within our list, this makes the links blocks, and will stretch across the page like this until we set the width for them. You can find more information on the display attribute by checking out Quirksmode's display declaration tutorial.

#navigation a {
display: block;
}

To see correctly I will add a background colour and change the text colour.

#navigation a {
display: block;
background-color: #DDEEFF;
color: #369;
}

Now lets see what we have so far in this CSS list navigation tutorial example.

Next on our to-do list is to shorten the length. We can set a width about 100 pixels wide, that should do.

#navigation a {
display: block;
background-color: #DDEEFF;
color: #369;
width: 100px;
}

Each list at the moment is too close together, lets spread them out a bit and give the a tag some padding.

#navigation a {
display: block;
background-color: #DDEEFF;
color: #369;
width: 100px;
padding: 2px 0px 2px 5px;
}

If you don't understand my method of padding take a look at my CSS padding tutorial. Lets also remove the underline from our link tags.

#navigation a {
display: block;
background-color: #DDEEFF;
color: #369;
width: 100px;
padding: 2px 0px 2px 5px;
text-decoration: none;
}

OK, lets take a look at what we currently have in this CSS list navigation tutorial example.

It's starting to take shape I'm sure you will agree. The last thing on the list is to add a rollover. Or as it is correctly called :hover.

#navigation a:hover {
background-color: #369;
color: #fff;
}

Now when your mouse passes over a link we will get our rollover colours. Take a look at the final CSS list navigation tutorial example and check out the finished product.

Very nice I'm sure you will agree.