Tab-style suckerfish menu
Here's an example of a Suckerfish menu. I think the great thing about this kind of menu, as opposed to certain other javascript-based menus, is the fact that the javascript is only there for IE6 and earlier. This will work fine without the script in good browsers. Also, even if you were using IE and you had javascript disabled, you'd still at least be able to use the top links to go to somewhere. With many javascript-based menus, if javascript is disabled, there's no navigation and the user is basically screwed.
Javascript
sfHover = function() {
var sfEls = document.body.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
HTML
<div id="drinkmenu2">
<h1>Tab-style suckerfish menu</h1>
<p>Here's an example of a <a href="http://www.htmldog.com/articles/suckerfish/">Suckerfish</a> menu. I think the great thing about this kind of menu, as opposed to certain other javascript-based menus, is the fact that the javascript is only there for IE6 and earlier. This will work fine without the script in good browsers. Also, even if you were using IE and you had javascript disabled, you'd still at least be able to use the top links to go to somewhere. With many javascript-based menus, if javascript is disabled, there's no navigation and the user is basically screwed.</a>
</p>
<ul id="nav">
<li><a href="#">Wine</a>
<ul id="wine">
<li><a href="#"><img src="wine1.jpg" alt="wine1" /></a></li>
<li><a href="#"><img src="wine2.jpg" alt="wine2" /></a></li>
<li><a href="#"><img src="wine3.jpg" alt="wine3" /></a></li>
<li><a href="#"><img src="wine4.jpg" alt="wine4" /></a></li>
</ul>
</li>
<li><a href="#">Beer</a>
<ul id="beer">
<li><a href="#"><img src="beer1.jpg" alt="beer1" /></a></li>
<li><a href="#"><img src="beer2.jpg" alt="beer2" /></a></li>
<li><a href="#"><img src="beer3.jpg" alt="beer3" /></a></li>
<li><a href="#"><img src="beer4.jpg" alt="beer4" /></a></li>
</ul>
</li>
<li><a href="#">Whisky</a>
<ul id="whisky">
<li><a href="#"><img src="whisky1.jpg" alt="whisky1" /></a></li>
<li><a href="#"><img src="whisky2.jpg" alt="whisky2" /></a></li>
<li><a href="#"><img src="whisky3.jpg" alt="whisky3" /></a></li>
</ul>
</li>
</ul>
</div>
CSS
#drinkmenu2 ul { /* all lists */
cursor: default;
padding: 0;
margin: 0 auto;
list-style: none;
width:500px;
position: relative;
text-align:center;
font-family: Showcard Gothic;
}
#drinkmenu2 ul#nav { height:180px;}
#drinkmenu2 ul li { /* all list items */
float: left;
position:relative;
width: 120px;
line-height:1.3em;
color:white;
background:red;
border:1px solid yellow;
}
#drinkmenu2 ul li ul li {
background:lightblue;
border:1px solid lightblue;
line-height:0;
}
#drinkmenu2 ul li:hover,
#drinkmenu2 ul li.sfhover,
#drinkmenu2 ul li:hover ul li,
#drinkmenu2 ul li.sfhover ul li {
color:navy;
background:lightblue;
border:1px solid lightblue;
display:block;
cursor:pointer;
}
#drinkmenu2 ul li ul { /* second-level lists */
display: none;
position: absolute;
top: 1.3em;
left: -1px;
}
#drinkmenu2 ul li:hover ul li:hover,
#drinkmenu2 ul li.sfhover ul li.sfhover {
background:yellow;
border:1px solid yellow;
}
#drinkmenu2 ul li:hover ul,
#drinkmenu2 ul li.sfhover ul { /* lists nested under hovered list items */
display: block;
}
#drinkmenu2 ul img {border:0;}
#drinkmenu2 ul #beer {left:-123px;}
#drinkmenu2 ul #whisky{left:-245px;}
Comments
#1 #2Glad you like it (big smile goes here - or it would if I had smilies on this site).
Have you actually looked at this page in IE7, dude? Appalling.
Darrell,
I've just moved the files to a different server. I guess I forgot the IE stylesheet. Thanks for the heads up. 
It should look OK now. By the way, for what it's worth, Firefox is a better browser by far. Why not try it out?
Really cool menu love it!
That is particuarly cool. I especialy like the way it degrades into a legible nested list.