Graphical CSS Rollover Menu

In my previous post about CSS image rollovers we touched briefly on how to create more advanced menu systems using the CSS rollover technique. Let’s now take a deeper look to see the advanced menu in action.

We looked previously at the Apple menu and how they use a single image sprite to run their menu system.

They include all four states of the navigation bar into a single image and then transition between them when a user hovers, clicks or views a section.

Creating our own menu

As an example we will create our own little menu bar in photoshop that could be used on a website.

Here we have a single image containing our three different menu sections (home, blog, contact) and the four different states that the menu could be in: normal, hover, clicked and active.

Creating the code

The following case may look long and complex, but it is really very simple and can be broken up into four sections which have been commented in the CSS. Within our image sprite each image is 150px x 44px and you will see these dimensions used throughout the CSS.

CSS Code

/*
*       Setup
*/
ul.cssmenu {
        list-style: none;
        padding: 0px;
        }

.displace {
        position: absolute;
        left: -5000px;
        }

ul.cssmenu li {
        float: left;
        }

ul.cssmenu li a {
        display: block;
        width: 150px;
        height: 44px;
        background: url('sprite.gif');
        }

/*
*       Normal Links
*/
ul.cssmenu li.home a {
        background-position: 0 0;
        }

ul.cssmenu li.blog a {
        background-position: -150px 0;
        }

ul.cssmenu li.contact a {
        background-position: -300px 0;
        }

/*
*       Hover Links
*/
ul.cssmenu li.home a:hover {
        background-position: 0 -44px;
        }

ul.cssmenu li.blog a:hover {
        background-position: -150px -44px;
        }

ul.cssmenu li.contact a:hover {
        background-position: -300px -44px;
        }

/*
*       Clicked Links
*/
ul.cssmenu li.home a:active {
        background-position: 0 -88px;
        }

ul.cssmenu li.blog a:active {
        background-position: -150px -88px;
        }

ul.cssmenu li.contact a:active {
        background-position: -300px -88px;
        }

/*
*       Selected/Active Links
*/
ul.cssmenu li.home a.selected {
        background-position: 0 -132px;
        }

ul.cssmenu li.blog a.selected {
        background-position: -150px -132px;
        }

ul.cssmenu li.contact a.selected {
        background-position: -300px -132px;
        }

We first setup some basic classes to style an unordered list and to displace text off the screen for use with screen readers and users without CSS. Within ‘ul.cssmenu li a‘ we then set the dimensions of each menu item to be 150px x 44px and provide the background image.

The next three areas of the CSS are simply different link selectors for the different actions that the button goes through. For each of the different actions we move the background position down 44px as this is the height of our image and so relates to where the next image begins. If you leave gaps between your images then you will have to adjust the background position accordingly.

The final section provides a class called ‘selected‘ that we will use to indicate the current page we are on.

HTML Code

<ul class="cssmenu">
        <li class="home"><a href="#" class="selected" title="Home"><span class="displace">Home</span></a></li>
        <li class="blog"><a href="#" title="Blog"><span class="displace">Blog</span></a></li>
        <li class="contact"><a href="#" title="Contact"><span class="displace">Contact</span></a></li>
</ul>

The HTML code is a very basic unordered list with our styles attached. The current active menu item is given the ‘selected‘ class.

We have included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it.

Without CSS enabled users will just see a nicely formatted list of menu items with text links, with CSS you will see a graphical menu like the one below!

The Result

The following link tree is the example of a CSS rollover menu. You cannot see the example function unless you have CSS enabled. If you are reading this in an RSS reader or external site you may need to visit the site to see a functioning menu.

• Home
• Blog
• Contact

As you can see hovering over the menu above changes the background image from blue to red, clicking then changes it to green. The home menu item has been given the ‘selected‘ class and so remains orange throughout.