A Menu Rollover Effect with CSS

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Sponsors

Introduction

This guide shows how to create a stylish rollover effect for a menu which might normally be done with Javascript or DHTML. CSS is used to do the menu highlighting.

Tested in

We have created 2 different versions of this tutorial so you can choose which one suits your application best. (first is best).

1. Using HTML lists
   Uses the least amount of html, always a good thing.
2. Using tables
   The original version of this tutorial and the common way menus are often created.

Pssst...we've also built a guide on how to add a transition effect to the menu using CSS filters. It's IE only but the menu will appear as normal in other browsers anyway.

Jump to the table version...

I want the transition effect...

In practice both methods operates much the same way. Using lists requires the least amount of HTML (some of us hand-coders are lazy) and it's also the method I recommend.

Note: traditionally HTML lists are unpredictable and awkward buggers but thanks to CSS we can easily take control of the lists to achieve the effect we need.

Step 1.

First create a containing div which will hold our menu, simply:

<div id="list-menu">
</div>

At this stage we only need to define the width (positioning also if you like):

#list-menu {
width: 132px;
/* this width value is also effected by
the padding we will later set on the links. */
}

Step 2.

Next we'll just create our test links in an unordered html list:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>

Step 3.

Now we have to take control of the list by removing the indents. We also need to remove the default bullets (or numbers if you decided to use an ordered list)

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

Setting the margin and padding to zero removed the indents from IE/Opera and Netscape/Mozilla respectively. At this stage we can also define text styles by adding the following to the above CSS:

font-family: verdana, arial, sanf-serif;
font-size: 12px;

We should also create a little bit of space between the list items to improve presentation, so we create the following css for each list item:

#list-menu li {
margin: 2px 0 0;
}

This will place a margin of 2px above each list item.

Note: At this stage we should set the font styles in the container (<div id="list-menu">) otherwise we may lose control of the margins in Internet Explorer. [Thanks to Alex Schleifer!]

The result of Step 3 is the following:

Step 4.

Now we just need to create styles for the actual links.

#list-menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none; /*lets remove the link underlines*/
}

An important point to mention at this stage is the width setting. When we tested this, leaving out the width setting caused the menu to mess up in IE6. This width combined with the side padding should equal the width we set for the container div in Step 1. 120px + (2px + 10px) = 132px

This gives us the following:

Step 5.

The final step is to create the rollover-effect. Like any link rollover effect this is done using the pseudo classes which allow us to define the visited, active and hover states for the links:

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}

So we now have the following:

For extra effect we could add a background image on hover:

#list-menu a:hover {
border: 1px solid #000000;
background: #333333 url(images/background1.gif);
color: #ffffff;
}

Which results in the following:

The background image I use here is the following:

As a last point, adding onfocus="this.blur()" into each link code will get rid of that annoying dotted line which appears when the link is clicked.

That's it. Now it's up to you to customise and play with.

Jump to the table version...

I want the transition effect...