How to use lists for vertical navigation

Tutorial by anne, last edited on January 2nd, 2008

In this tutorial we will learn how to use a simple list for easy vertical navigation.

Step One: Learn about lists

There are two types of lists: Ordered and Unordered
The HTML for these are <ol> and <ul>, respectively.

To create a list item, is this: <li>

So here is an unordered list:


<ul>

<li>Item One</li>

<li>Item Two</li>

</ul>

Step Two: Create the Navigation List

Generally a list will show up like this:

Item One
Item Two

In this tutorial, we are just learning how to turn our list into vertical navigation. In another tutorial we can cover horizontal navigation.

So lets make our list, and give it a special ID of "nav"


<ul id="menu">

<li><a href="pageone.html">Page One</a></li>

<li><a href="pagetwo.html">Page Two</a></li>

<li><a href="pagethree.html">Page Three</a></li>

</ul>

Step Three: Styling the Navigation

The first thing we will do is make each list item the same size by styling the links. That way when we can easily achieve rollovers. While we're at it, we will make the background white, the font 10pt Trebuchet MS white and with no underline.


ul#menu { list-style: none; padding: 0; margin: 0;}

ul#menu li { padding: 0; margin: 0; }

ul#menu li a {display: block;  width: 100px; height: 25px; background: #000; font: 10pt 'Trebuchet MS'; text-decoration: none; color: #FFF; }

This will look like:

Wow! We're already practically finished. Let's add some final touches.

Step Four: Creating a "Current Page"

When we have a multi-page website, it is best that the navigation lets us know where we are. So let's add that functionality to our navigational scheme by giving our Page One a class of "current".


<ul id="menu">

<li class="current"><a href="pageone.html">Page One</a></li>

<li><a href="pagetwo.html">Page Two</a></li>

<li><a href="pagethree.html">Page Three</a></li>

</ul>

Now let's edit our CSS to match.


ul#menu { list-style: none; padding: 0; margin: 0;}

ul#menu li { padding: 0; margin: 0; }

ul#menu li a {display: block;  width: 100px; height: 25px; background: #000; font: 10pt 'Trebuchet MS'; text-decoration: none; color: #FFF; }

ul#menu li.current a { background: #CCC; color: #000; }

If you want rollovers, give it a little more style by adding a hover style:


ul#menu { list-style: none; padding: 0; margin: 0;}

ul#menu li { padding: 0; margin: 0; }

ul#menu li a {display: block;  width: 100px; height: 25px; background: #000; font: 10pt 'Trebuchet MS'; text-decoration: none; color: #FFF; }

ul#menu li a:hover {background: #4E8F00; }

ul#menu li.current a { background: #CCC; color: #000; }

The finished product:

You can add padding, margins, backgrounds or anything you need based on these simple principles to make your navigation all it can be!

This tutorial was written on January 2nd, 2008 by anne. You can leave a comment below to help keep track of errors. Follow comments to this posting through the RSS feed.

Comments:

No one has commented on this tutorial yet.