Design Meme

After seeing the Hoverbox Image Gallery developed by Nathan Smith, I thought that a similar approach would work very nicely for a menu. This would allow you to create a much larger rollover image for each menu item, overlapping the neighbouring menu items and other elements on the page.

The original Hoverbox code uses two img elements, one for the thumbnail and one for the larger image. For a menu it’s more important to avoid duplicating the links themselves, and I also wanted to control the image with CSS rather than img elements. This meant making some changes to the original Hoverbox code.

The HTML

We’ll start with a fairly normal unordered list of menu items, but we’re going to add two extra tags inside the links.

<div id="menu">
<ul>
<li id="home"><a href="/"><span><em>News</em></span></a></li>
<li id="about"><a href="/about/"><span><em>About</em></span></a></li>
<li id="sketches"><a href="/sketchbook/"><span><em>Sketches</em></span></a></li>
<li id="videos"><a href="/videos/"><span><em>Videos</em></span></a></li>
<li id="store"><a href="/store/"><span><em>Store</em></span></a></li>
<li id="links"><a href="/links/"><span><em>Links</em></span></a></li>
</ul>
</div>

The span tag will be used to display the rollover state for each menu item. We’ll add em tags closest to the text of the link to allow us to to hide it when we display the alternating graphics for each menu item. You could of course create a Hoverbox menu without any image graphics, in which case you won’t need this extra em tag.

The Images (optional)

We’re going to use the CSS Sprite technique which means a single image file can be used for both the normal and rollover states of the images. Here’s an example of an image you might use in a Hoverbox Menu:

You can combine the CSS Hoverbox Menu with other techniques. In addition to showing the regular and rollover states of each menu item, you can also display the current page using the middle portion of the graphic. However, to keep things more straightforward, we’ll just focus on the regular and rollover images for this tutorial.

The CSS

First, we’ll style the container div for our menu.

#menu { height:100px; background:#dd0708; background-image:url(images/menubg.gif); }

Then we’ll remove the bullets from the list items and float them all to form a horizontal list of links.

#menu ul { list-style:none; margin:0; padding:0 10px;  }
	
#menu li { float:left; }

We’ll hide the span inside the link from displaying in the normal state for each menu item. Since we’re going to be using images for our menu, we’ll hide the display of the HTML text as well by setting the em to display:none at the same time.

#menu li a span, #menu li a em { display:none; }

Next we’re going to set the height and width of the links to match the portion of the background image for the regular button states. For the normal state, make sure your background-position is at the top.

#menu li a { display:block; height:40px; width:113px; background-position:center top; }

Set the height and width of your span to be displayed when a user hovers over one of the links. Use negative left and top values and a z-index of 1 to position the hover state overtop of the normal state image. Your background-position will now change to the bottom to show the rollover image.

#menu li a:hover span { display: block; position: relative; width:163px; height:90px;
left:-25px; top:-25px; z-index: 1; background-position:center bottom; }

Now you can specify the individual button images to match each link in your menu.

#menu li#home a, #menu li#home a:hover span { background-image:url(images/home.gif); }
#menu li#about a, #menu li#about a:hover span { background-image:url(images/about.gif); }
#menu li#sketches a, #menu li#sketches a:hover span { background-image:url(images/sketches.gif); }
#menu li#videos a, #menu li#videos a:hover span { background-image:url(images/videos.gif); }
#menu li#store a, #menu li#store a:hover span { background-image:url(images/store.gif); }
#menu li#links a, #menu li#links a:hover span { background-image:url(images/links.gif); }

Here’s the CSS all together:

#menu ul { list-style:none; margin:0; padding:0 10px;  }
#menu li { float:left; }
#menu li a span, #menu li a em { display:none; }
#menu li a { display:block; height:40px; width:113px; background-position:center top; }
#menu li a:hover span { display: block; position: relative; width:163px; height:90px;
left:-25px; top:-25px; z-index: 1; background-position:center bottom; }
#menu li#home a, #menu li#home a:hover span { background-image:url(images/home.gif); }
#menu li#about a, #menu li#about a:hover span { background-image:url(images/about.gif); }
#menu li#sketches a, #menu li#sketches a:hover span { background-image:url(images/sketches.gif); }
#menu li#videos a, #menu li#videos a:hover span { background-image:url(images/videos.gif); }
#menu li#store a, #menu li#store a:hover span { background-image:url(images/store.gif); }
#menu li#links a, #menu li#links a:hover span { background-image:url(images/links.gif); }

The Completed Hoverbox Menu

The finished Hoverbox Menu with extra big rollover images. (Links changed to avoid 404s.)

The finished Hoverbox Menu can also be seen on Rob Schrab’s new blog, along with some other CSS techniques including a CSS Image Map.

Discuss this article