Posted By

wrburgess on 02/06/09


Tagged

css javascript drupal drupal6 sonsofsuckerfish


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

snipplrhanz


Sons of Suckerfish Menu in Drupal 6


 / Published in: CSS
 

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

  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. }

Report this snippet  

You need to login to post a comment.