Creating list based navigation bars with CSS

"At last" they cry, "more technical content!" Something a little straight-forward this time I think. Lets have a look at how to create nice navigation bars on websites. For this we'll be using a bit of HTML and a sprinkling of CSS.

Now we all remember nav bars that looked like this:

Item 1
Item 2
Item 3

Yuck! So how is a list going to help this you may ask? Surely it's going to look just as bad if not worse, something like this maybe:

• Item 1
• Item 2
• Item 3

Argh, my eyes my beautifuls eyes. Right enough messing about, sorry. All this list needs is some careful styling, lets start by having a gander at the html used above:

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

Ok, lets put a <div> around that and give it an ID.

<div id="navbar">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>

Right now we can fiddle about with the navbar div to our heart's content in the CSS. I won't bother with the actual div CSS itself beyond a width just put in for example because I've no idea where you want to put it or anything so lets go straight in an modify those list styles:

#navbar {
width: 150;
}

#navbar ul {
margin: 0;
padding: 0;
}

#navbar ul li {
list-style: none; /* gets rid of the bullet points */
}

#navbar ul li a {
text-decoration: none; /* gets rid of underlines */
width: 150px;
background-color: #eee; /*a very light grey*/
}

Due to the aparent limitations of this blogging interface and WYSINRWYG (What You See Is Not Really What You Get) I don't seem to be able to display this here which is a pity (God knows I've just spent the last hour trying to). But never mind go to this link to see it in action

One final addition of note: to change something when the user mouses over the navbar item do the following


#navbar ul li a:hover {
text-decoration: underline;
background-color: #ccc;
}

that will underline the text and make the box a darker grey when the mouse point moves over it.

Notes
A couple of extra's I've picked up on my way round, this method seems all the more effective if you name the anchor so <a id="nbar" etc then in the css you can refer to something like #navbar ul li a#nbar.
Iceweasel under debian seems to like having <br /> tags after the list element... no idea why
For horizontal navigation bars just include the property display: inline; in the css.

have lots of fun and if you get totally lost, try w3schools, it's got shed loads of useful info.