首页 > 语言 > JavaScript > 正文

js实现的四级左侧网站分类菜单实例

2024-05-06 16:19:26
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了js实现的四级左侧网站分类菜单,实例分析了javascript操作页面元素实现tab切换的相关技巧,需要的朋友可以参考下

本文实例讲述了js实现的四级左侧网站分类菜单。分享给大家供大家参考。具体实现方法如下：

 

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html;  
  6. charset=iso-8859-1"/> 
  7. <script src="http://www.google-analytics.com/urchin.js" 
  8. type="text/javascript"> 
  9. </script> 
  10. <script type="text/javascript"> 
  11. _uacct = "UA-152060-1"; 
  12. urchinTracker(); 
  13. </script> 
  14. <title>demo</title> 
  15. <style type="text/css"> 
  16. <!-- 
  17. body { 
  18. font-family: Arial, Helvetica, sans-serif; 
  19. font-size: 11px; 
  20. } 
  21. #nav, #nav ul { 
  22. list-style: none; 
  23. background: #F9F9F9; 
  24. font-weight: bold; 
  25. padding: 0px; 
  26. margin: 0px; 
  27. border: solid 1px #CCCCCC; 
  28. border-bottom: 0px; 
  29. width: 150px; 
  30. text-align: left; 
  31. } 
  32. #nav ul ul{ 
  33. border: solid 1px #CCCCCC; 
  34. border-bottom: 0px; 
  35. } 
  36. #nav a { 
  37. display: block; 
  38. width: 150px; 
  39. w/idth: 140px; 
  40. color: #333333; 
  41. text-decoration: none; 
  42. text-align: center; 
  43. border-bottom: solid 1px #CCCCCC; 
  44. text-align: left; 
  45. padding-left: 10px; 
  46. } 
  47. #nav a:hover{ 
  48. color: #336666; 
  49. } 
  50. #nav a.selected{ 
  51. background: url(/images/bb_expand.gif) no-repeat right 50%; 
  52. } 
  53. #nav li { 
  54. line-height: 22px; 
  55. position: relative; 
  56. } 
  57. #nav li ul { 
  58. position: absolute; 
  59. left: -999em; 
  60. width: 150px; 
  61. font-weight: normal; 
  62. margin: 0px; 
  63. padding: 0px; 
  64. } 
  65. #nav li li { 
  66. width: 150px; 
  67. } 
  68. #nav li ul a { 
  69. width: 150px; 
  70. w/idth: 126px; 
  71. padding: 0px 12px; 
  72. line-height: 22px; 
  73. text-align: left; 
  74. } 
  75. #nav li ul ul { 
  76. margin: 0px 0 0 150px; 
  77. } 
  78. #nav li:hover ul ul,#nav li.sfhover ul ul,#nav li:hover ul ul ul{ 
  79. left: -999em; 
  80. } 
  81. #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul,#nav li li li:hover ul 
  82. { 
  83. left: auto; 
  84. } 
  85. #nav li:hover ul,#nav li.sfhover ul{ 
  86. left: 150px; 
  87. top: 0px; 
  88. } 
  89. #nav li:hover, #nav li.sfhover { 
  90. background: #F5E3C0; 
  91. } 
  92. * html #nav li { 
  93. float: left; 
  94. height: 1%; 
  95. } 
  96. * html #nav li a { 
  97. height: 1%;  
  98. } 
  99. --> 
  100. </style> 
  101. <script type="text/javascript"> 
  102. <!--//--><![CDATA[//><!-- 
  103. sfHover = function() { 
  104. var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
  105. for (var i=0; i<sfEls.length; i++) { 
  106. sfEls[i].onmouseover=function() { 
  107. this.className+=" sfhover"; 
  108. } 
  109. sfEls[i].onmouseout=function() { 
  110. this.className=this.className.replace(new RegExp(" sfhover//b"),""); 
  111. } 
  112. } 
  113. } 
  114. if (window.attachEvent) window.attachEvent("onload", sfHover); 
  115. //--><!]]> 
  116. </script> 
  117. </head> 
  118. <body> 
  119. <p><a href="javascript:history.back()">Back</a></p> 
  120. <ul id="nav"> 
  121. <li><a href="">Home</a></li> 
  122. <li><a href="/aboutme.html">About Me</a></li> 
  123. <li><a class="selected" href="/tutorials.html">Tutorials</a> 
  124. <ul> 
  125. <li><a href="#">Sub Menu 31</a></li> 
  126. <li><a class="selected" href="#">Sub Menu 32</a> 
  127. <ul> 
  128. <li><a class="selected"href="#">Sub Menu 321</a><ul> 
  129. <li><a href="#">Sub Menu 321</a></li> 
  130. </ul></li> 
  131. <li><a href="#">Sub Menu 322</a></li> 
  132. <li><a href="#">Sub Menu 323</a></li> 
  133. <li><a class="selected"href="#">Sub Menu 324</a><ul> 
  134. <li><a href="#">Sub Menu 321</a></li> 
  135. <li><a href="#">Sub Menu 322</a></li> 
  136. <li><a href="#">Sub Menu 323</a></li> 
  137. <li><a href="#">Sub Menu 324</a></li> 
  138. </ul></li> 
  139. </ul> 
  140. </li> 
  141. <li><a href="#">Sub Menu 33</a></li> 
  142. <li><a href="#">Sub Menu 34</a></li> 
  143. </ul> 
  144. </li> 
  145. <li><a class="selected" href="/gallery/gallery.html">Gallery</a> 
  146. <ul> 
  147. <li><a href="#">Sub Menu 41</a></li> 
  148. <li><a class="selected" href="#">Sub Menu 42</a> 
  149. <ul> 
  150. <li><a href="#">Sub Menu 421</a></li> 
  151. <li><a href="#">Sub Menu 422</a></li> 
  152. <li><a href="#">Sub Menu 423</a></li> 
  153. <li><a href="#">Sub Menu 424</a></li> 
  154. </ul> 
  155. </li> 
  156. <li><a href="#">Sub Menu 43</a></li> 
  157. <li><a href="#">Sub Menu 44</a></li> 
  158. </ul> 
  159. </li> 
  160. <li><a href="#">Contact Me</a></li> 
  161. </ul> 
  162. </body> 
  163. </html> 

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：js实现点击按钮后给Div图层设置随机背景颜色的方法

下一篇：javascript实现完美拖拽效果

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有