Home Karmen For You Tuts Games xoxo updates Res Listed Credits LinkMe Cbox

CSS:Vertical Navigation

Vertical CSS navigation is a better alternative for a bland set of links. Have you ever wanted something different and more vibrant, and something that stands out for your navigation links?
CSS block navigaion is the way to go, and is a better alternative to imagemaps, because often people browse the internet with images turned off, and would be lost on a site with imagemaps.
Additionally, CSS navigation might sound boring and technical, but there are ways of making it interesting, and it also looks more professional.

Changing your code

Normally you'd have something like this:

Relatively boring. And you know you want to spice it up.
With CSS block navigation, it is essential to place the links in a list rather than just as normal text. That way we can customise the links so they stand out as navigation and not boring ordinary links.
This is the code you should now have:

Notice how we have added id="navigation" to the coding, so that we will be able to customise and style this.


After doing that, you will obviously want to customise your navigation.
Below are the sections that need to be added to your stylesheet, and why.

This will remove the ugly default bullets that come up automatically when you make a list.

This part is for colouring each link block. You can probably envisage what it looks like. The background will be the background of the links; the colour obviously the colour of the text.
The width sets each link in the list with the same width. The border is optional and can be removed – it simply adds interest. The padding is so that the links will be spaced from the border and not lie over it. If you want space between each link block, use margin: 5px; with your own value.
You can always add other attributes here – you can change font style, size and decoration.
Of course, a hover effect is desirable, so make sure you add this:

Of course, you can customise the hover effect as well, to how you like. Using something like margin-left or margin-right will allow you to make the link blocks smaller in width on hover.
It's pretty simple. you can see that i have used this plenty of times on my websites. If this Tutorial has helped you Please Link back!!