Suckerfish Drop-Down Menus, jQuery-style


 / Published in: JavaScript
 

URL: http://be.twixt.us/jquery/suckerFish.php

Haven't had a chance to use this but it looks very promising.

  1. /*
  2.  jQuery Suckerfish Drop Downs
  3. */
  4.  
  5. $(document).ready(function(){
  6. $("#nav-one li").hover(
  7. function(){ $("ul", this).fadeIn("fast"); },
  8. function() { }
  9. );
  10. if (document.all) {
  11. $("#nav-one li").hoverClass ("sfHover");
  12. }
  13. });
  14.  
  15. $.fn.hoverClass = function(c) {
  16. return this.each(function(){
  17. $(this).hover(
  18. function() { $(this).addClass(c); },
  19. function() { $(this).removeClass(c); }
  20. );
  21. });
  22. };
  23.  
  24.  
  25.  
  26. /*
  27. Sample Markup
  28. */
  29.  
  30. <ul id="nav-one" class="nav">
  31. <li>
  32.  
  33. <a href="#item1">item 1</a>
  34. <ul>
  35. <li><a href="#item1.1">item 1.1</a></li>
  36. <li><a href="#item1.2">item 1.2</a></li>
  37. <li><a href="#item1.3">item 1.3</a></li>
  38. <li><a href="#item1.4">item 1.4</a></li>
  39.  
  40. </ul>
  41. </li>
  42. <li>
  43. <a href="#item2">item 2</a>
  44. <ul>
  45. <li><a href="#item2.1">item 2.1</a></li>
  46. <li><a href="#item2.2">item 2.2</a></li>
  47.  
  48. </ul>
  49. </li>
  50. <li>
  51. <a href="#item3">item 3</a>
  52. <ul>
  53. <li><a href="#item3.1">item 3.1</a></li>
  54. <li><a href="#item3.2">item 3.2</a></li>
  55.  
  56. </ul>
  57. </li>
  58. <li>
  59. <a href="#item4">item 4</a>
  60. <ul>
  61. <li><a href="#item4.1">item 4.1</a></li>
  62. <li><a href="#item4.2">item 4.2</a></li>
  63.  
  64. <li><a href="#item4.3">item 4.3</a></li>
  65. </ul>
  66. </li>
  67. </ul>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on April 4, 2007

Suckerfish is great, except when mixed with Flash and Safari. Its rendering in Safari gets screwed when you put the dropdowns over a Flash movie. Unfortunately, there's no fix for it.

Posted By: eroteme on July 12, 2007

I could be wrong but doesn't this trigger all list items - instead of list items that contain a ul??

Posted By: kristin on January 9, 2008

Superfish might work with flash.. it uses iframes

Posted By: slumbering on August 22, 2008

Son of Suckerfish Dropdowns

Posted By: MacAddict on August 2, 2009

@jonhenshaw:

The fix is easy. All you need is wmode:transparent on your Flash movies. Has worked like a flash for years...

Posted By: jpdesigndev on February 3, 2011

Looks promising...

You need to login to post a comment.