Code666 (代码贴、代码片段)

[JavaScript] 一个简单的JavaScript二级导航菜单代码 →→→→→进入此内容的聊天室

来自 , 2019-09-10, 写在 JavaScript, 查看 102 次.
URL http://www.code666.cn/view/d19a006f
  1. <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <title>css菜单演示</title>
  8.  
  9.  
  10. <style type="text/css">
  11. <!--
  12.  
  13. *{margin:0;padding:0;border:0;}
  14. body {
  15. font-family: arial, 宋体, serif;
  16.           font-size:12px;
  17. }
  18.  
  19.  
  20. #nav {
  21.     line-height: 24px;    list-style-type: none; background:#666;
  22. }
  23.  
  24. #nav a {
  25. display: block; width: 80px; text-align:center;
  26. }
  27.  
  28. #nav a:link    {
  29. color:#666; text-decoration:none;
  30. }
  31. #nav a:visited    {
  32. color:#666;text-decoration:none;
  33. }
  34. #nav a:hover    {
  35. color:#FFF;text-decoration:none;font-weight:bold;
  36. }
  37.  
  38. #nav li {
  39. float: left; width: 80px; background:#CCC;
  40. }
  41. #nav li a:hover{
  42. background:#999;
  43. }
  44. #nav li ul {
  45. line-height: 27px;    list-style-type: none;text-align:left;
  46. left: -999em; width: 180px; position: absolute;
  47. }
  48. #nav li ul li{
  49. float: left; width: 180px;
  50. background: #F6F6F6;
  51. }
  52.  
  53.  
  54. #nav li ul a{
  55. display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
  56. }
  57.  
  58. #nav li ul a:link    {
  59. color:#666; text-decoration:none;
  60. }
  61. #nav li ul a:visited    {
  62. color:#666;text-decoration:none;
  63. }
  64. #nav li ul a:hover    {
  65. color:#F3F3F3;text-decoration:none;font-weight:normal;
  66. background:#C00;
  67. }
  68.  
  69. #nav li:hover ul {
  70. left: auto;
  71. }
  72. #nav li.sfhover ul {
  73. left: auto;
  74. }
  75. #content {
  76. clear: left;
  77. }
  78.  
  79.  
  80. -->
  81. </style>
  82.  
  83. <script type=text/javascript><!--//--><![CDATA[//><!--
  84. function menuFix() {
  85. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  86. for (var i=0; i<sfEls.length; i++) {
  87.     sfEls[i].onmouseover=function() {
  88.     this.className+=(this.className.length>0? " ": "") + "sfhover";
  89.     }
  90.     sfEls[i].onMouseDown=function() {
  91.     this.className+=(this.className.length>0? " ": "") + "sfhover";
  92.     }
  93.     sfEls[i].onMouseUp=function() {
  94.     this.className+=(this.className.length>0? " ": "") + "sfhover";
  95.     }
  96.     sfEls[i].onmouseout=function() {
  97.     this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"),
  98.  
  99. "");
  100.     }
  101. }
  102. }
  103. window.onload=menuFix;
  104.  
  105. //--><!]]></script>
  106.  
  107. </head>
  108. <body>
  109.  
  110.  
  111. <ul id="nav">
  112. <li><a href="#">产品介绍</a>
  113. <ul>
  114. <li><a href="#">产品一</a></li>
  115. <li><a href="#">产品一</a></li>
  116. <li><a href="#">产品一</a></li>
  117. <li><a href="#">产品一</a></li>
  118. <li><a href="#">产品一</a></li>
  119. <li><a href="#">产品一</a></li>
  120. </ul>
  121. </li>
  122. <li><a href="#">服务介绍</a>
  123. <ul>
  124. <li><a href="#">服务二</a></li>
  125. <li><a href="#">服务二</a></li>
  126. <li><a href="#">服务二</a></li>
  127. <li><a href="#">服务二服务二</a></li>
  128. <li><a href="#">服务二服务二服务二</a></li>
  129. <li><a href="#">服务二</a></li>
  130. </ul>
  131. </li>
  132. <li><a href="#">成功案例</a>
  133. <ul>
  134. <li><a href="#">案例三</a></li>
  135. <li><a href="#">案例</a></li>
  136. <li><a href="#">案例三案例三</a></li>
  137. <li><a href="#">案例三案例三案例三</a></li>
  138. </ul>
  139. </li>
  140. <li><a href="#">关于我们</a>
  141. <ul>
  142. <li><a href="#">我们四</a></li>
  143. <li><a href="#">我们四</a></li>
  144. <li><a href="#">我们四</a></li>
  145. <li><a href="#">我们四111</a></li>
  146. </ul>
  147. </li>
  148.  
  149. <li><a href="#">在线演示</a>
  150. <ul>
  151. <li><a href="#">演示</a></li>
  152. <li><a href="#">演示</a></li>
  153. <li><a href="#">演示</a></li>
  154. <li><a href="#">演示演示演示</a></li>
  155. <li><a href="#">演示演示演示</a></li>
  156. <li><a href="#">演示演示</a></li>
  157. <li><a href="#">演示演示演示</a></li>
  158. <li><a href="#">演示演示演示演示演示</a></li>
  159. </ul>
  160. </li>
  161. <li><a href="#">联系我们</a>
  162. <ul>
  163. <li><a href="#">联系联系联系联系联系</a></li>
  164. <li><a href="#">联系联系联系</a></li>
  165. <li><a href="#">联系</a></li>
  166. <li><a href="#">联系联系</a></li>
  167. <li><a href="#">联系联系</a></li>
  168. <li><a href="#">联系联系联系</a></li>
  169. <li><a href="#">联系联系联系</a></li>
  170. </ul>
  171. </li>
  172.  
  173. </ul>
  174.  
  175. </body>
  176. </html>
  177. //javascript/6773

回复 "一个简单的JavaScript二级导航菜单代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666