Advanced Search

jQuery Simple Drop Down Menu

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

Expand | Embed | Plain Text

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. </style>
  47.  
  48.  
  49. <!-- ##################################  JAVASCRIPT  ################################## -->
  50. <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
  51. <script type="text/javascript">
  52. var timeout         = 500;
  53. var closetimer		= 0;
  54. var ddmenuitem      = 0;
  55.  
  56. function jsddm_open()
  57. {	jsddm_canceltimer();
  58. 	jsddm_close();
  59. 	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
  60.  
  61. function jsddm_close()
  62. {	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  63.  
  64. function jsddm_timer()
  65. {	closetimer = window.setTimeout(jsddm_close, timeout);}
  66.  
  67. function jsddm_canceltimer()
  68. {	if(closetimer)
  69. 	{	window.clearTimeout(closetimer);
  70. 		closetimer = null;}}
  71.  
  72. $(document).ready(function()
  73. {	$('#jsddm > li').bind('mouseover', jsddm_open);
  74. 	$('#jsddm > li').bind('mouseout',  jsddm_timer);});
  75.  
  76. document.onclick = jsddm_close;
  77. </script>
  78.  
  79.  
  80.  
  81.  
  82. <!-- ##################################  HTML  ################################## -->
  83. <ul id="jsddm">
  84. 	<li><a href="#">JavaScript</a>
  85. 		<ul>
  86. 			<li><a href="#">Drop Down Menu</a></li>
  87. 			<li><a href="#">jQuery Plugin</a></li>
  88. 			<li><a href="#">Ajax Navigation</a></li>
  89. 		</ul>
  90. 	</li>
  91. 	<li><a href="#">Effect</a>
  92. 		<ul>
  93. 			<li><a href="#">Slide Effect</a></li>
  94. 			<li><a href="#">Fade Effect</a></li>
  95. 			<li><a href="#">Opacity Mode</a></li>
  96. 			<li><a href="#">Drop Shadow</a></li>
  97. 			<li><a href="#">Semitransparent</a></li>
  98. 		</ul>
  99. 	</li>
  100. 	<li><a href="#">Navigation</a></li>
  101. 	<li><a href="#">HTML/CSS</a></li>
  102. 	<li><a href="#">Help</a></li>
  103. </ul>
  104. <div class="clear"></div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.