下拉菜单的竖向实现, 原理基本和横向的相同

December 30th, 2004 11:09 AM No Comments Filed under: 资源分享 Feed for this Entry

需要说明的是：
首先为了获得主菜单左侧的边框，我增加了一个 id="Nav" 的块元素，并且浮动在左侧（发现没有了这个浮动，不会出现边框）。等一下看看直接让 Menu 浮动在左侧会不会有。

然后对于子菜单的定位，同横向有些不同。

演示：

下拉菜单，纵向： /upload/DropDownMenu_V.htm
下拉菜单，横向： /upload/DropDownMenu_H.htm
菜单翻转图片效果： /upload/RollImage.htm

XML/HTML代码
  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=gb2312" />  
  5. <title>下拉菜单，竖向</title>  
  6. <style type="text/css" media="screen">  
  7. <!--   
  8. #Nav { /*Make the left border */   
  9. width: auto;   
  10. float: left;   
  11. border-left: 1px solid #777;   
  12. }   
  13. ul {   
  14. margin: 0px;   
  15. padding: 0px;   
  16. list-style: none;   
  17. /*display: inline;*/   
  18. }   
  19. ul li {   
  20. position: relative;   
  21. width: 120px;   
  22. float: left;   
  23. }   
  24. li ul {   
  25. position: absolute;   
  26. left: 0px;   
  27. top: 23px;   
  28. display: none;   
  29. border-bottom: 1px solid #777;   
  30. border-left: 0px;   
  31. }   
  32. ul li a {   
  33. display: block;   
  34. font-size: 12px;   
  35. line-height: 22px;   
  36. text-decoration: none;   
  37. color: #333;   
  38. background-color: #FFF;   
  39. height: 22px;   
  40. padding-left: 8px;   
  41. border: 1px solid #777;   
  42. border-left: 0px;   
  43. }   
  44. ul li ul li a { /* The border of main menus is different from the sub menus */   
  45. border: 1px solid #777;   
  46. border-bottom: 0px;   
  47. }   
  48. a:hover {   
  49. color: #F60;   
  50. background-color: #EFEFEF;   
  51. }   
  52. /* Fix IE. Hide from IE Mac */   
  53. * html ul li {   
  54. float: left;   
  55. height: 1%;   
  56. }   
  57. * html ul li a {   
  58. height: 1%;   
  59. }   
  60. /* End */   
  61. li:hover ul, li.over ul {   
  62. display: block;   
  63. }   
  64. -->  
  65. </style>  
  66. <script language="javascript" type="text/javascript">  
  67. <!--   
  68. startList = function() {   
  69. if (document.all && document.getElementById) {   
  70. var menuRoot = document.getElementById("Menu");   
  71. for (var i = 0; i < menuRoot.childNodes.length; i++) {   
  72. var node = menuRoot.childNodes[i];   
  73. if (node.nodeName == "LI") {   
  74. node.onmouseover = function() {   
  75. this.className += " over";   
  76. }   
  77. node.onmouseout = function() {   
  78. thisthis.className = this.className.replace(" over", "");   
  79. }   
  80. }   
  81. }   
  82. }   
  83. }   
  84. window.onload = startList;   
  85. -->  
  86. </script>  
  87. </head>  
  88.   
  89. <body>  
  90. <div id="Nav">  
  91. <ul id="Menu">  
  92. <li><a href="#">Home</a></li>  
  93. <li><a href="#">About us</a>  
  94. <ul>  
  95. <li><a href="#">Brief</a></li>  
  96. <li><a href="#">History</a></li>  
  97. <li><a href="#">Awards</a></li>  
  98. </ul>  
  99. </li>  
  100. <li><a href="#">Services</a>  
  101. <ul>  
  102. <li><a href="#">Sites</a></li>  
  103. <li><a href="#">Hosts</a></li>  
  104. <li><a href="#">E-mail</a></li>  
  105. </ul>  
  106. </li>  
  107. <li><a href="#">Contact us</a>  
  108. <ul>  
  109. <li><a href="#">Asia</a></li>  
  110. <li><a href="#">North American</a></li>  
  111. <li><a href="#">Europe</a></li>  
  112. </ul>  
  113. </li>  
  114. </ul>  
  115. </div>  
  116. </body>  
  117. </html>  

TAGS: 没有

No Comment Yet

Leave a comment

captcha
请输入验证码