Suckerfish Drop-Down Menus, jQuery-style


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

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


Copy this code and paste it in your HTML
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.