Posted By

zvineyard on 10/10/11


Tagged

css javascript menu ie6 flyout


Versions (?)

Javascript Dropdown Menu


 / Published in: JavaScript
 

This is a JavaScript powered dropdown (flyout) menu. HTML and CSS included.

  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  

You need to login to post a comment.