Creating a Vertical CSS List Menu

by RabBell   |   2 February 2011

  Have questions? Discuss this HTML5 tutorial with others on the forums.

Ever seen those CSS list menus? Fancy making one? Of course you are! Well, this is a handy tutorial if you want to create a quick CSS menu and be able to control its appearance.

Step 1: Creating the List

In your HTML page, create a div and place an unordered list in the div, like this:

<div>
<ul id="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About Us</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

As you can see from the code, I linked all of our list items to generic HTML pages. When you use the above code in your site, you will probably want to link it to specific pages on your site. Also notice that we've given the list an id called nav. I'll revisit id names shortly, so don't worry too much about it now. Anyway, let's proceed to Step 2.

Step 2: Initial CSS

In the head section, between your <head> and </head> sections of your page, copy and paste the following code:

<style type="text/css">
.menustyling{
width:300px;
margin:0px;
padding:0px;
background-color:#fff;
}
</style>

The code you pasted looks bizarre when you glance at it, but, when you look at it in detail, it is quite simple. First, I specify the properties for width, margin, padding and background color. For each of those properties, I assign them values. Declaring a style - called .menustyling - is only part of styling an html object. You need to call it, and you do that by using the id name along with a div tag:

<div class="menustyling">

If you replace the div tag in your list's HTML with the above code, you probably will not see much change. The main advantage of wrapping your list around a div tag is that making future modifications to your list's background color, margin, padding, etc. is very simple. You simply change the code in the menustyling block. You don't ever touch the list's properties. This decoupling of style information from the content is what makes CSS a very powerful tool in your toolbox.

Step 3: Removing the Bullet Points

Next you'll want to remove those bullet points from the list, and we may as well fix the padding and margin for the list also. Add the following code directly below the earlier code you pasted between the <head> tags:

.menustyling ul{
list-style:none;
padding:0px;
margin:0px;
}

Can you spot the difference between what you pasted above and what you already had pasted? They both have the same name - .menustyling. But, notice that the second version of menustyling contains the ul tag in its header. That means that any ul content placed within the menustyling umbrella will have the styles specific in the .menustyling ul class.

What you should have now is a simple list as shown in the image below:

[ how your list should look ]

To see a live demo of the above list, click here to view the list in a new window.

Step 4: More Styling

Ok, now go back to the style tags, and copy and paste the class below above the </style> tag:

#nav li a{
background-color:#A4DFF1;
display:block;
width:196px;
line-height:20px;
height:20px;
margin:0px;
 
font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:bold;
padding-left:3px;
padding-top:7px;
color:#000000;
}

First, notice that all of the above style information is contained under the #nav umbrella. With that simple fact in mind, let me explain each line:

#nav li a{

This means this effect will change how the list items (li) containing links (a) in the menu will appear.


background-color:#A4DFF1;

This line is pretty self-explanatory. The background color of all hyperlinked list items are set to a kind of sky blue.


display:block;

This means the element, in this case the list item, will be displayed as a block-level element with a line break before and after the element.


width:196px;
height:20px;
margin:0px;

This is pretty self-explanatory also. These three lines specify the width, height, and margin of the element.


font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:bold;
color:#000000;

The above lines specify the font styles for your hyperlinked list text. Overall, there is nothing tricky to explain here.


text-decoration:none;

By default, all links are underlined. This line of code will remove the underline from the text in your list menu.


padding-left:3px;
padding-top:7px;

This is just some padding to position the font a bit away from the left and move in the vertical centre of the item.

When you preview your list, you should see the efforts of your labor as shown in the screenshot:

[ your modified list ]

Like with the earlier image, click here to view the above example live.

Step 5: Wrapping it Up

Now, while still within the style tags, paste the following class:

#nav li a:hover {
color:#FFFFFF;
background-color:#77B8CC;
}

This will give the list item a hover style. In other words, when the user moves the mouse cursor over the link, the appearance of the hovered over menu item will change based on what you specified in the above code. In our case, the only changes you will see correspond to the color and background-color of your list item.

And you're done you now have a working CSS list menu.

tip: to get more from this you could change the colours in the list item for images, for instance if I swap the background color line in the #nav li a:hover class for the following line:

background-image: url(buttons_over.jpg);

You should see now when the user rolls over the menu you get images rather than the background colour. You should now have a good CSS Menu without the need for using JavaScript.

If you have any questions, post on the forums or contact me.

RabBell
Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!