Advanced Search

Sons of Suckerfish Menu in Drupal 6

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*********************************************
  2. /* add this to a javascript file in the theme 
  3. /*********************************************/
  4.  
  5. sfHover = function() {
  6.   var sfEls = document.getElementById("nav").getElementsByTagName("li");
  7.  
  8.   for (var i=0; i<sfEls.length; i++) {
  9.     sfEls[i].onmouseover=function() {
  10.       this.className+=" sfhover";
  11.     }
  12.     sfEls[i].onmouseout=function() {
  13.       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  14.     }
  15.   }
  16. }
  17.  
  18. if (window.attachEvent) window.attachEvent("onload", sfHover);
  19.  
  20. /*********************************************
  21. /* import into any page template files
  22. /*********************************************/
  23.  
  24. <script type="text/javascript" src="hover.js"></script>
  25.  
  26. /*********************************************
  27. /* replace "footer" with id of menu wrapper 
  28. /*********************************************/
  29.  
  30. #footer ul {
  31.   margin: 0;  
  32.   padding: 0;
  33.   list-style: none;  
  34. }
  35.  
  36. #footer a {
  37.   display: block;
  38.   width: 10em;
  39. }
  40.  
  41. #footer li {
  42.   float: left;
  43.   width:  10em;
  44. }
  45.  
  46. #footer li ul {
  47.   position: absolute;
  48.   width: 10em;
  49.   left: -999em;
  50. }
  51.  
  52. #footer li:hover ul {
  53.   left: auto;
  54. }
  55.  
  56. #footer li:hover ul, #footer li.sfhover ul {
  57.   left:auto;
  58. }
  59.  
  60. *:first-child+html #footer {
  61. height: 1%;
  62. }
  63. *:first-child+html #footer li {
  64. height: 1%;
  65. }

URL: http://htmldog.com/articles/suckerfish/dropdowns/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.