Using CSS Image Rollover Menus

Over the years I have shied away from using graphics in menus because I wanted to maximize SEO potential. In recent months I've stumbed upon a completely palatable CSS solution that allows me to have the text in the link, but replace it with a rollover image. This technique doesn't appear to be new, but it's new to me and I dig it.

I haven't found a browser yet that has any problem with this technique. I've even used this in a project where javascript was outlawed.

So, here's how it works. The entire menu runs off a single image that stacks the normal state on top of the rollover state. Each menu item negative offsets the image to the location of that image. Then the CSS will then shift the image vertically to the rollover position. Here's an example from derekvreeland.com:

And another example from Advent Conspiracy:

Here's what this might look like in the HTML (this is not a tutorial, so beware the details):

<ul id="menu">
    <li id="home_btn"><a href="/" title="my website name">home</a></li>
    <li id="book_btn"><a href="/book" title="about my book">the book</a></li>
    ...
</ul>

And then in the CSS:

#menu li a {
    display:block;
    width: 300px;
    height:20px;
    background: transparent url(/images/menu.gif) no-repeat scroll 0 0;
    text-indent:-9999px; // this moves the text outside the visible area
}

#home_btn a {
    background-position: 0 0;
    width: 100px
}

#home_btn a:hover {
    background-position: 0 -20px;
}

#book_btn a {
    background-position: -100px 0;
    width: 200px
}

#book_btn a:hover {
    background-position: -100 -20px;
}

 
The only odd behavior I've noticed is that since the text is moved way off to the left, when you click a menu item and the browser shoulds you the hyperlink border it will extend way off screen. Otherwise, I find this method to be super easy to implement and even update with changes. Updates usually involve generating a new image and recalculating my math for starting position and rollover shifts.

Full Derek Vreeland Case Study

Full Advent Conspiracy Case Study

 


Categories: GeneralPermalink