CSS Rollover Menu
Here's one way to have CSS rollovers in a dropdown menu. It uses the Suckerfish script.
The images are within h2 tags and they become 'display:none' on hover to reveal background images (not very good images, but it's just a demo...).
(I think this might not be a strictly legitimate use of h2 tags, but they are sort of headings, so...)
Javascript
//suckerfish//
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
<h1>CSS Rollover Menu</h1>
<p>Here's one way to have CSS rollovers in a dropdown menu. It uses the <a href="http://www.htmldog.com/articles/suckerfish/">Suckerfish</a> script.</p>
<p>The images are within h2 tags and they become 'display:none' on hover to reveal background images (not very good images, but it's just a demo...).</p>
<p>(I think this might not be a strictly legitimate use of h2 tags, but they <em>are</em> sort of headings, so...)</p>
<ul id="rollover">
<li id="a"><h2><img src="wine.jpg" alt="" /></h2>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li id="b"><h2><img src="wine.jpg" alt="" /></h2>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li id="c"><h2><img src="wine.jpg" alt="" /></h2>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
CSS
#rollover {
width:150px;
margin:auto;
}
#rollover a {
text-decoration:none;
color:#ff00ff;
background-color:#333333;
display:block;
font-size:1em;
font-weight:bold;
}
#rollover li {
float:left;
width:50px;
}
#rollover h2 {
height:50px;
margin:0;
padding:0;
}
#rollover h2 img {
display:block;
}
#rollover #a h2 {
background-image:url(beer1.jpg);
}
#rollover #b h2 {
background-image:url(beer2.jpg);
}
#rollover #c h2 {
background-image:url(beer3.jpg);
}
#rollover li:hover h2 img, #rollover li.sfhover h2 img {
display:none;
}
#rollover li ul {
display:none;
}
#rollover li:hover ul, #rollover li.sfhover ul {
display:block;
}
#rollover li ul li:hover a, #rollover li ul li.sfhover a{
background-color:#ff00ff;
color:#333333;
}
Comments
#1 #2Have you tried getting two instances of this menu to work on a ie 6 page? I really want to get two working .. but cant figure out how :S email me if you can figure it out .. samjallen@hotmail.com
Sam,
That shouldn't be a problem. Just give the lists different ids.
I would like to incorporate the links into the css and/or a js file to facilitate updating links from one file rather than numerous pages. What is best way to do that and the corresponding code?
Hi Bon Rouge - Thanks for the script, it's just what I wanted and simple to use. There is a problem that I've noticed with it that isn't immediately obvious on this page. When the mouse hovers and the menu drops down, the rest of the content from the page gets pushed down too. Is there a better way to stop this than simply to include a blank area below the menu as you have done here?
Thanks
Nice page this is. It's very useful for us