Creating a Navigation Menu using an Unordered List and CSS

April 18th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

By far the easiest, cleanest, most lightweight and most flexible way to create a horizontal navigation menu is to use an unordered list and style it with CSS. I’m going to show you, starting with a standard list, how to create a fully functional menu including formatting and functionality.

To create a standard unordered list we use the following HTML:

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact Us</a></li>
</ul>

This creates a list that looks like so:

CSS Navigation Menu - Step 1

Not very attractive or horizontal huh?!? The first thing we need to do is apply a reference/ID to the list and create some basic CSS so that our HTML code now looks as follows:

<ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact Us</a></li>
</ul>

And our CSS looks like so:

#menu { 
    list-style-type:none;
    margin:0;
    padding:0;
}
#menu li {
    float:left;
}

OK, good. You should now have a navigation that looks something like:

CSS Navigation Menu - Step 2

If so we’re making good progress. It’s now horizontal and a navigation menu in it’s most primitive form. So what did we do above?

list-style-type:none
The ‘list-style-type’ attribute allows you to set the type of list to use. By default it uses the black, round bullet but this can be changed to use a square or a white circle. In this case we set it to ‘none’ so that we get a plain list with no symbols.

margin:0 and padding:0
Unordered lists by default include some kind of spacing around them. By setting the margin and padding to zero pixels we remove this unwanted space. Don’t worry, we will add any required spacing back in in a bit later on.

float:left
This is the style that turns our vertical list into a horizontal one. In doing this we are telling each individual list item to kind of hover next to it’s predecessor which in turn places them one after the other on a single line.

Now we have a simple menu in place, lets move onto making it look pretty and add some formatting. I want to add a background color, add some padding and align the text correctly. To do this our HTML remains the same but our CSS might look something like:

#menu { 
    list-style-type:none;
    margin:0;
    padding:0;
    height:30px;
    background-color:#600;
    font-family:Arial;
    font-size:0.9em;
}
#menu li {
    float:left;
    height:30px;
    line-height:30px;
}
#menu li a {
    display:block;
    padding:0 20px;
    color:#FFF;
    text-decoration:none;
}
#menu li a:hover {
    background-color:#900;
    text-decoration:none;
}

As a result of the above our menu now has a background colour, formatted text and padding. I’ve also added a class to change the background colour when someone rolls over one of our menu items. We should now have something that looks like so:

CSS Navigation Menu - Step 3

Go ahead, try changing the colours and styles to match the look and feel of your site and give your users a quick and easy method of navigation.

Please note: If the above doesn’t work for you, you may need to look at adding a DOCTYPE to the top of your HTML. See here for more information on how to do this.

This entry was posted on Sunday, April 18th, 2010 at 10:28 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments (0)
Comments are closed.