Hoverbox Menu
May 23rd, 2006
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); }#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.
Stuart Robertson
good article~
That is a very cool effect—in Firefox. It doesn’t work in IE though
Nice redesign, too.
not working in ie6 …
Thanks. Sadly, IE6 doesn’t support this effect. But who uses IE6 anymore?
Very nice effect. I like it, works flawlessly in FireFox, no dice in IE like others stated. Who cares though, I love it! If only this would work on IE6 I would integrate it with my sites.
Keep up the good work!
Wow! it is cool. but it doesn’t work in IE 6
Thanks
heh, a niec treat for firefox users
Nice effect, but why doesn’t it work in IE? I was under the impression that CSS was a cross-platform standard…
CSS is indeed a cross browser standard… but the different web browsers have varying levels of support for that standards. Unfortunately this effect, like quite a few other nice CSS effects, will not work in IE 6 (although it WILL degrade gracefully).
The good news is that IE 7 improves support for CSS —making previously Firefox / Safari / Opera only effects available in the default Windows browser.
Very cool effect but worthless since it won’t work with IE6. Even on the example site it creates acript errors and the images disappear.
It does NOT degrade gracefully.
There is no JavaScript used in this technique… so no JavaScript errors either. Those are probably from something else I’ve got running on the site.
And IE6 will be gone one day.
Cool menu!
Can the same type of menu be accomplished using only text links and no pictures. Can you have a text link in the menu overlap other text in a menu (when it gets larger) using a hover effect?
Just wanted to say how nice looking the site in general is. What a nice rest on the eyes after looking at bright white pages all day.
man, that is one obnoxious menu. if you want to make sites like that, just use Flash.
Nice idea for folks who feel visually challenged (VC= mom and dad sites). Problem is that VC folks also suffer lame browser equipment. Too slow to download menu images {grin and bear reality, please}. Which makes your HoverBox article especially interesting respecting an adaptation to a text-only version. Since VC lame equipment syndrome also implies strict browser-type adherence to CSS1, the horizontal li’s would have to go, unfortunate thing, overruns. So we really only need that ordinary line of text links separated by spaces.
Well, customizing 5 link pseudoclasses is easy. But wait! Refitting CSS1, the custom ‘a’ (link) pseudoclass will cascade into every other link in the page. But we only want huge mouseover text on top-of-page links, and normal links elsewhere in the same document. How can CSS help us to create two or more link pseudoclass text effects. This would allow rock-solid safe browser handling of two or more link styles in the same document. Are we forced into CSS2 or CSS3 to retain rock-solid compatibility? How do we code multiple styles for the link pseudoclass?
Very cool effect for menu’s. You can use the same idea to power a simple hover for images as well. It is quite hard to find a simple pop out, rollover image script around, but your idea helped me get something working. Simple but effective :
http://defunc.com/new/demo/popoutbox.html
Thanks heaps!
hi,
for similar effect supported in I.E. 6?
what you suggest?
thanks all
ok, css+xhtml are just a hobby for me… still… I would like to know if it’s possible in the meantime to create a horizontal menu, with a list, with ONE image, without the span and em thing…
@shan
Yes, it’s possible to make a menu using a single image—take a look at my “Night of the Image Maps” article for an example of how you could do that.
I really like this menu effect, but am having trouble with different graphics, and especially the “active” state. I tried – unsuccessfully – to duplicate the effect using regular text. Do you have any suggestions for implementing this effect using normal text effects?
Hey Johnathan,
For simple text effects all you have to do is something like the following :
css———-
a.enlarge {font-size:12px; color:black;}
a.enlarge:hover {font-size:16px; color:red; font-weight:bold;}
html———-
General Text Link
This will make regular text enlarge and change color on rollover – is this what you were wanting?
If you dont want to use it in links but just general text – you could wrap the text in span tags ( or any tag really ) with the same class ( enlarge )
Hope this helps
Hey Johnathan,
For simple text effects all you have to do is something like the following :
css———-
a.enlarge {font-size:12px; color:black;}
a.enlarge:hover {font-size:16px; color:red; font-weight:bold;}
html———-
General Text Link
This will make regular text enlarge and change color on rollover – is this what you were wanting?
If you dont want to use it in links but just general text – you could wrap the text in span tags ( or any tag really ) with the same class ( enlarge )
Hope this helps
** Sorry this board seems to not understand breaks and embeds html instead of writing it out – hit me up if yuou have any problems figuring out what I did
Change Is Afoot, all you hacked attackers!
Dear Stuart, your Sprite technique appears to be going by-the-by in the closing days of IE7, October 2008. It’s those crinkly Microsoft updates that besmirch all but the insiders – and maybe them too. Hence your lovely disertation on hover boxes boasts an image not found eye-sore. My think is that in order to enable full layering, opacity, and a host of other CSS 3.0 features Microsoft has been proposing for years, some ‘hacks’ of the trade are being left behind. To keep up appearances, please delete this post and lose the sprite a.s.a.p.
Expression Web 2.0 uses all the latest CSS 2.0 syntax. Lose your hacks!
I’ll need to dust off the XP machine and see what’s new with IE I guess. Not that I’ll take the article down though. It might help developed something else.
Sam:
Thank you for the reply. I was thinking too hard about the text effect, that you so simply stated. I have tried to duplicate the effect using only text, but something is ‘lost’ and it doesn’t look as nice/slick. I have made some transparent pngs, but the new problem is that the larger ‘hover’ png doesn’t totally cover the smaller png (there is some overlap). Any ideas on how to have the smaller png “disappear” when hovered over?
I have tried the “onmouseover” javascript in the tag, but to no avail. When changing the code to do a simple mouse-over / hover effect, the whole menu gets pushed down…any ideas?
hey johnathan – shoot me an email – just click my name above – with the code etc all zipped up.
Happy to have a look at it for you
I figured it out—though it is not a “pure” solution possibly. First I had to change how the image (still using single image) was used, though it should be possible to use two different images, then that wouldn’t be sprite imaging—I divided the a: and a:hover css coding.
Then because the second (bigger image) overlapped the smaller image, which didn’t look nice, because of the transparency, I simply added the background colour of that section of the page. A nice similar effect, but you need to be aware of the sizing, margin, etc.