Image Roll Over Drop Down Menu Help

Saint_Michael

Feb 19 2006, 03:50 PM

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.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 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>

Tyssen

Feb 19 2006, 10:32 PM

QUOTE(Saint_Michael @ Feb 20 2006, 01:50 AM)

CODE

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://www.volllaw.com.au/

leiaah

Feb 21 2006, 01:45 PM

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

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE