advanced code snippet search

Posted By

jonkemp on 07/29/10


Tagged

css javascript html


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

jonhenshaw
michellebracken
manjarco
batandwacolani


Son of Suckerfish

 / Published in: HTML
 

URL: http://www.htmldog.com/articles/suckerfish/dropdowns/

Dropdown menus with pure HTML and CSS, with a JavaScript fallback for Internet Explorer 6. This version is more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Son of Suckerfish</title>
  6. <style type="text/css">
  7. #nav, #nav ul {
  8. 	padding: 0;
  9. 	margin: 0;
  10. 	list-style: none; 
  11. 	line-height: 1;
  12. }
  13.  
  14. #nav a {
  15. 	display: block;
  16. 	width: 10em;
  17. }
  18.  
  19. #nav li {
  20. 	float: left;
  21. 	width: 10em;
  22. }
  23. #nav li ul {
  24. 	position: absolute;
  25. 	width: 10em;
  26. 	left: -999em;
  27. }
  28. #nav li:hover ul, #nav li.sfhover ul {
  29. 	left: auto;
  30. }
  31. </style>
  32. <script type="text/javascript">
  33. sfHover = function() {
  34. 	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  35. 	for (var i=0; i<sfEls.length; i++) {
  36. 		sfEls[i].onmouseover=function() {
  37. 			this.className+=" sfhover";
  38. 		}
  39. 		sfEls[i].onmouseout=function() {
  40. 			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  41. 		}
  42. 	}
  43. }
  44. if (window.attachEvent) window.attachEvent("onload", sfHover);
  45. </script>
  46.  
  47. </head>
  48.  
  49. <body>
  50.  
  51. <ul id="nav">
  52.   <li><a href="#" title="Course">COURSE</a>
  53.     <ul>
  54. 	  <li><a href="#" title="appetizers">appetizers</a></li>
  55. 	  <li><a href="#" title="beverages">beverages</a></li>
  56. 	  <li><a href="#" title="breads">breads</a></li>
  57. 	  <li><a href="#" title="breakfast">breakfast</a></li>
  58. 	  <li><a href="#" title="condiments">condiments</a></li>
  59. 	  <li><a href="#" title="desserts">desserts</a></li>
  60. 	  <li><a href="#" title="lunch/snacks">lunch/snacks</a></li>
  61. 	  <li><a href="#" title="main dish">main dish</a></li>
  62. 	  <li><a href="#" title="salads">salads</a></li>
  63. 	  <li><a href="#" title="side dishes">side dishes</a></li>
  64. 	  <li><a href="#" title="soups">soups</a></li>
  65. 	</ul>
  66.   </li>
  67.   <li><a href="#" title="Ingredient">INGREDIENT</a>
  68.     <ul>
  69. 	  <li><a href="#" title="appetizers">appetizers</a></li>
  70. 	  <li><a href="#" title="beverages">beverages</a></li>
  71. 	  <li><a href="#" title="breads">breads</a></li>
  72. 	  <li><a href="#" title="breakfast">breakfast</a></li>
  73. 	  <li><a href="#" title="condiments">condiments</a></li>
  74. 	  <li><a href="#" title="desserts">desserts</a></li>
  75. 	  <li><a href="#" title="lunch/snacks">lunch/snacks</a></li>
  76. 	  <li><a href="#" title="main dish">main dish</a></li>
  77. 	  <li><a href="#" title="salads">salads</a></li>
  78. 	  <li><a href="#" title="side dishes">side dishes</a></li>
  79. 	  <li><a href="#" title="soups">soups</a></li>
  80. 	</ul>
  81.   </li>
  82.   <li><a href="#" title="Cuisine">CUISINE</a>
  83.     <ul>
  84. 	  <li><a href="#" title="appetizers">appetizers</a></li>
  85. 	  <li><a href="#" title="beverages">beverages</a></li>
  86. 	  <li><a href="#" title="breads">breads</a></li>
  87. 	  <li><a href="#" title="breakfast">breakfast</a></li>
  88. 	  <li><a href="#" title="condiments">condiments</a></li>
  89. 	  <li><a href="#" title="desserts">desserts</a></li>
  90. 	  <li><a href="#" title="lunch/snacks">lunch/snacks</a></li>
  91. 	  <li><a href="#" title="main dish">main dish</a></li>
  92. 	  <li><a href="#" title="salads">salads</a></li>
  93. 	  <li><a href="#" title="side dishes">side dishes</a></li>
  94. 	  <li><a href="#" title="soups">soups</a></li>
  95. 	</ul>
  96.   </li>
  97.   <li><a href="#" title="Diet">DIET</a>
  98.     <ul>
  99. 	  <li><a href="#" title="appetizers">appetizers</a></li>
  100. 	  <li><a href="#" title="beverages">beverages</a></li>
  101. 	  <li><a href="#" title="breads">breads</a></li>
  102. 	  <li><a href="#" title="breakfast">breakfast</a></li>
  103. 	  <li><a href="#" title="condiments">condiments</a></li>
  104. 	  <li><a href="#" title="desserts">desserts</a></li>
  105. 	  <li><a href="#" title="lunch/snacks">lunch/snacks</a></li>
  106. 	  <li><a href="#" title="main dish">main dish</a></li>
  107. 	  <li><a href="#" title="salads">salads</a></li>
  108. 	  <li><a href="#" title="side dishes">side dishes</a></li>
  109. 	  <li><a href="#" title="soups">soups</a></li>
  110. 	</ul>
  111.   </li>
  112.   <li><a href="#" title="Occasion">OCCASION</a>
  113.     <ul>
  114. 	  <li><a href="#" title="appetizers">appetizers</a></li>
  115. 	  <li><a href="#" title="beverages">beverages</a></li>
  116. 	  <li><a href="#" title="breads">breads</a></li>
  117. 	  <li><a href="#" title="breakfast">breakfast</a></li>
  118. 	  <li><a href="#" title="condiments">condiments</a></li>
  119. 	  <li><a href="#" title="desserts">desserts</a></li>
  120. 	  <li><a href="#" title="lunch/snacks">lunch/snacks</a></li>
  121. 	  <li><a href="#" title="main dish">main dish</a></li>
  122. 	  <li><a href="#" title="salads">salads</a></li>
  123. 	  <li><a href="#" title="side dishes">side dishes</a></li>
  124. 	  <li><a href="#" title="soups">soups</a></li>
  125. 	</ul>
  126.   </li>
  127.   <li><a href="#" title="Preperation">PREPERATION</a>
  128.     <ul>
  129. 	  <li><a href="#" title="appetizers">appetizers</a></li>
  130. 	  <li><a href="#" title="beverages">beverages</a></li>
  131. 	  <li><a href="#" title="breads">breads</a></li>
  132. 	  <li><a href="#" title="breakfast">breakfast</a></li>
  133. 	  <li><a href="#" title="condiments">condiments</a></li>
  134. 	  <li><a href="#" title="desserts">desserts</a></li>
  135. 	  <li><a href="#" title="lunch/snacks">lunch/snacks</a></li>
  136. 	  <li><a href="#" title="main dish">main dish</a></li>
  137. 	  <li><a href="#" title="salads">salads</a></li>
  138. 	  <li><a href="#" title="side dishes">side dishes</a></li>
  139. 	  <li><a href="#" title="soups">soups</a></li>
  140. 	</ul>
  141.   </li>
  142. </ul>
  143.  
  144. </body>
  145. </html>

Report this snippet  

You need to login to post a comment.