 Image Roll Over Drop Down Menu Help |
|
|
|
|
  |
 Feb 19 2006, 03:50 PM
Post
#1
|
|
|
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3  Group: [HOSTED] Posts: 6,807 Joined: 21-September 04 From: 9r33|\| 399$ 4|\|D 5P4/\/\ Member No.: 1,218  myCENT:62.60  |
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> This post has been edited by Saint_Michael: Feb 19 2006, 07:00 PM |
 |
 
|
|
Feb 19 2006, 10:32 PM
Post
#2
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
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/ |
|
|
|
|
Feb 21 2006, 01:45 PM
Post
#3
|
|
|
Super Member Group: Members Posts: 436 Joined: 21-January 05 From: Koronadal City, Philippines Member No.: 3,358 |
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
|
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 2nd December 2008 - 11:13 AM |