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.
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