Image Roll Over Drop Down Menu Help

Saint_Michael · February 19, 2006

Ok I been searching for days now on a half way descent tutorial on how to do a Image Roll Over Drop Down Menu in CSS without the use of javascript, I been seeing alot of the suckerfish set up but of course no one goes in to detail on how to set up the image rollover version of it. Plus I don't want the dhtml or the javascript setup just good ole pure css.

Also I need ot be able to control multiple menus in one script as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ Document</title><meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /><style type="text/css">ul, li {margin:0;padding:0;list-style-type:none;}a {text-decoration:none;}ul {width:40px;}ul h2, li {height:32px;margin:0;padding:0;}ul h2 img {display:block;}ul h2 {background-image:url(images/template43_04.gif);}ul li:hover h2 img, ul li.sfhover h2 img {display:none;}ul li ul {display:none;}ul li:hover ul, ul li.sfhover ul {display:block;}ul li ul li:hover, ul li ul li.sfhover {background-color:#FF0000;}ul1, li {margin:0;padding:0;list-style-type:none;}a {text-decoration:none;}ul1 {width:40px;}ul1 h2, li {height:32px;margin:0;padding:0;}ul1 h2 img {display:block;}ul1 h2 {background-image:url(images/template43_05.gif);}ul1 li:hover h2 img, ul li.sfhover h2 img {display:none;}ul1 li ul {display:none;}ul1 li:hover ul, ul li.sfhover ul {display:block;}ul1 li ul li:hover, ul li ul li.sfhover {background-color:#FF0000;}</style><script type="text/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);</script></head><body><ul id="nav">	<li><h2><img src="images/template41_04.gif" width="40" height="32" alt="" /></h2>		<ul>			<li><a href="#">Red</a></li>			<li><a href="#">White</a></li>			<li><a href="#">Pink</a></li>		</ul>	</li></ul></body></html>

Edited February 19, 2006 by Saint_Michael (see edit history)

Tyssen · February 19, 2006

ul1 {width:40px;}

What's ul1? It's not a valid tag. You're quite right about there being a lack of tutorials on how to combine image replacement rollovers with Suckerfish Dropdowns. I've been thinking or writing an article about it myself one day but haven't gotten around to it yet. Best I can do is point you towards an example I've done: http://forums.xisto.com/no_longer_exists/

leiaah · February 21, 2006

If you're using Macromedia Dreamweaver the code gets generated automatically after choosing your settings for the rollovers. I just thought maybe you can just make use of it if you wanted an easier way and you already have the program installed. It's in the behaviors panel. It's in JavaScript and I understand you want it done in CSS but again if you have it, it's easier. Cheers :huh:

Sign In

Image Roll Over Drop Down Menu Help

Recommended Posts

Saint_Michael 3

Share this post

Link to post

Share on other sites

Tyssen 0

Share this post

Link to post

Share on other sites

leiaah 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information