Advanced Search

Javascript Dropdown Menu

/ Published in: JavaScript
Save to your folder(s)
This is a JavaScript powered dropdown (flyout) menu. HTML and CSS included.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script>
  2. var timeout	= 0;
  3. var closetimer	= 0;
  4. var ddmenuitem	= 0;
  5.  
  6. // open hidden layer
  7. function mopen(id) {	
  8. 	// cancel close timer
  9. 	mcancelclosetime();
  10. 	// close old layer
  11. 	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  12. 	// get new layer and show it
  13. 	ddmenuitem = document.getElementById(id);
  14. 	ddmenuitem.style.visibility = 'visible';
  15. }
  16. // close showed layer
  17. function mclose() {
  18. 	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  19. }
  20. // go close timer
  21. function mclosetime() {
  22. 	closetimer = window.setTimeout(mclose, timeout);
  23. }
  24. // cancel close timer
  25. function mcancelclosetime() {
  26. 	if(closetimer) {
  27. 		window.clearTimeout(closetimer);
  28. 		closetimer = null;
  29. 	}
  30. }
  31.  
  32. // close layer when click-out
  33. document.onclick = mclose; 
  34. </script>
  35.  
  36. <style>
  37. #dropdown {
  38. font-family:Arial, Helvetica, sans-serif;
  39. font-size:12px;
  40. margin: 0;
  41. padding: 0;
  42. z-index: 30;
  43. }
  44.  
  45. #dropdown li {
  46. margin: 0;
  47. padding: 0;
  48. list-style: none;
  49. float: right;
  50. }
  51.  
  52. #dropdown li a {	
  53. display: block;
  54. margin: 0 1px 0 0;
  55. padding: 8px 10px;
  56. width: 60px;
  57. background: #f1f1f1;
  58. color: #333;
  59. text-align: center;
  60. text-decoration: none;
  61. }
  62.  
  63. #dropdown li a:hover {
  64. background:#999;
  65. color:#fff;
  66. }
  67.  
  68. #dropdown div {	
  69. position: absolute;
  70. visibility: hidden;
  71. margin: 0 -58px 0;
  72. padding: 0;
  73. background: #f1f1f1;
  74. border-bottom: 1px solid #e3e3e3;
  75. }
  76.  
  77. #dropdown div a	{
  78. position: relative;
  79. display: block;
  80. margin: 0;
  81. padding: 8px 10px;
  82. width: 118px;
  83. white-space: nowrap;
  84. text-align: left;
  85. text-decoration: none;
  86. background: #f1f1f1;
  87. color: #333;
  88. }
  89.  
  90. #dropdown div a:hover {
  91. background:#999;
  92. color:#FFF;
  93. }
  94.  
  95. </style>
  96. <div class="dropdown" id="dropdown">
  97. <ul id="dropdown">
  98.     <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Login</a>
  99.         <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  100.             <a href="https://apps.rackspace.com/">Secure Email</a>
  101.             <a href="http://medicallanguage.homestead.com">Students</a>
  102.             <a href="https://mdsofkansas.net/secure">MDS Staff</a>
  103.             <a href="https://mdsofkansas.net/secure">MDS Clients</a>
  104.             <a href="#">File Storage</a>
  105.  
  106.         </div>
  107.     </li>
  108. </ul>
  109. <div style="clear:both"></div>
  110. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.