Loading ...

CSS Image Rollover Navbar

by Greg Lunn - June 30, 2006

Wouldn’t it be really cool if there were a way to create an image rollover that doesn’t require preloading images or JavaScript? Wouldn’t it be great if you could create horizontal or vertical navigation using only a clean unordered list markup in your HTML? How about having both of them, together?

Let’s take a look at the HTML code we will use for this example. I wanted to keep the code as clean as possible, while making it possible to arrange the display of the items in a variety of ways. Both the vertical and horizontal navigation will be based in this simple list.

<ul id="navlist">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
</ul>

Creating Pure CSS Rollovers

Using CSS, image rollovers can be created using only a single image that is loaded when the page is called, eliminating the need to preload images using JavaScript. To create this effect, you’ll need to create images that contain the two or three states of your rollover within the same file.

Rollover images, each with three states.

Once the images are ready, they are loaded into a container element, in this case the <a> tag, as a background image and cropped using the <a> tag’s width and height. Then it’s simply a matter of using the background-position property to move the image within the container to simulate the image swap effect.

Vertical Navigation

First, let’s take a look at the CSS used to create a vertical navigation menu from the list. It’s really a simple matter of converting the display of the <a> tags to display:block;, and providing them with the proper width and height to display a single “state” from our image. The hover and active pseudo-classes are then used to move the background-position to simulate the rollover effect, as seen to the right. Remember to also remove the bullets by using list-style:none;.

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:135px;
    color:#fff;
    text-decoration:none;
    background:url("images/tab.gif") no-repeat;
    padding:7px 10px 6px 10px;
}
#navlist a:hover { 
    background-position:0 -29px;
    color: #1e5ebd;
}
#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}

How About Horizontal Tabs?

Using the same HTML, we can create a horizontal list with the appearance of tabs by using a different image, and adjusting the CSS. Note that the only real differences in this from the vertical example are that instead of setting the <a> tags to block, we use float:left; to place them to the right of one another. Also, we use display:inline; on the <li> tags to get them to display horizontally, which has the added benefit of automatically removing the bullets. (See the earlier article, Simple Horizontal Navbar List, for another example.)

Here is the CSS, adjusted for a horizontal display.

#navbar {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    height:45px;
}
#navbar li {
    list-style:none;
    display:inline;
}
#navbar a {
    width:110px;
    color:#fff;
    text-decoration:none;
    background:url("images/tab2.gif") no-repeat;
    float:left;
    padding:12px 10px 13px;
    margin:0 -10px;
}
#navbar a:hover { 
    background-position:0 -45px;
    color:#1e5ebd;
}
#navbar a:active {
    background-position:0 -90px;
    color:#1e5ebd;
}

The result is the horizontal tabbed menu below:

Note: In the examples displayed on this page, I’ve also included background images in the parent <ul> lists and additional padding, solely for appearance and easier recognition of the edges of the rollovers. Depending on the appearance of your buttons, this method may or may not be desirable, but will not affect the technique described here. You can see the examples on their own by downloading the example files.