jQuery Simple Drop Down Menu


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



Copy this code and paste it in your HTML
  1. <!-- ################################## CSS ################################## -->
  2. <style type="text/css">
  3. /* Styles: Javascript-Array.com Simple Drop-Down Menu Plugin */
  4. /* Source: http://javascript-array.com/scripts/jquery_simple_drop_down_menu */
  5. #jsddm {
  6. margin: 0;
  7. padding: 0
  8. }
  9. #jsddm li {
  10. float: left;
  11. list-style: none;
  12. font: 12px Tahoma, Arial;
  13. }
  14. #jsddm li a {
  15. display: block;
  16. background: #324143;
  17. padding: 5px 12px;
  18. text-decoration: none;
  19. border-right: 1px solid white;
  20. width: 70px;
  21. color: #EAFFED;
  22. white-space: nowrap;
  23. }
  24. #jsddm li a:hover {
  25. background: #24313C;
  26. }
  27. #jsddm li ul {
  28. margin: 0;
  29. padding: 0;
  30. position: absolute;
  31. visibility: hidden;
  32. border-top: 1px solid white;
  33. }
  34. #jsddm li ul li {
  35. float: none;
  36. display: inline;
  37. }
  38. #jsddm li ul li a {
  39. width: auto;
  40. background: #A9C251;
  41. color: #24313C;
  42. }
  43. #jsddm li ul li a:hover {
  44. background: #8EA344;
  45. }
  46.  
  47.  
  48. <!-- ################################## JAVASCRIPT ################################## -->
  49. <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
  50. <script type="text/javascript">
  51. var timeout = 500;
  52. var closetimer = 0;
  53. var ddmenuitem = 0;
  54.  
  55. function jsddm_open()
  56. { jsddm_canceltimer();
  57. jsddm_close();
  58. ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
  59.  
  60. function jsddm_close()
  61. { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  62.  
  63. function jsddm_timer()
  64. { closetimer = window.setTimeout(jsddm_close, timeout);}
  65.  
  66. function jsddm_canceltimer()
  67. { if(closetimer)
  68. { window.clearTimeout(closetimer);
  69. closetimer = null;}}
  70.  
  71. $(document).ready(function()
  72. { $('#jsddm > li').bind('mouseover', jsddm_open);
  73. $('#jsddm > li').bind('mouseout', jsddm_timer);});
  74.  
  75. document.onclick = jsddm_close;
  76.  
  77.  
  78.  
  79.  
  80. <!-- ################################## HTML ################################## -->
  81. <ul id="jsddm">
  82. <li><a href="#">JavaScript</a>
  83. <ul>
  84. <li><a href="#">Drop Down Menu</a></li>
  85. <li><a href="#">jQuery Plugin</a></li>
  86. <li><a href="#">Ajax Navigation</a></li>
  87. </ul>
  88. </li>
  89. <li><a href="#">Effect</a>
  90. <ul>
  91. <li><a href="#">Slide Effect</a></li>
  92. <li><a href="#">Fade Effect</a></li>
  93. <li><a href="#">Opacity Mode</a></li>
  94. <li><a href="#">Drop Shadow</a></li>
  95. <li><a href="#">Semitransparent</a></li>
  96. </ul>
  97. </li>
  98. <li><a href="#">Navigation</a></li>
  99. <li><a href="#">HTML/CSS</a></li>
  100. <li><a href="#">Help</a></li>
  101. </ul>
  102. <div class="clear"></div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.