收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 15780|回复: 3

[求助] 请教高手三级菜单,在这个基础上能改成四级菜单吗?

[复制链接]
发表于 2014-10-15 15:28:13 | 显示全部楼层 |阅读模式

 提示:您可以先修改部分代码再运行

 楼主| 发表于 2014-10-15 15:39:32 | 显示全部楼层
有类似的四级的也可以,我在网上找个不能用
回复 支持 反对

使用道具 举报

发表于 2014-10-16 09:00:02 | 显示全部楼层
楼主试试这个,悬浮的. 不过4级菜单,用jq 写没多长时间就能写出来

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

使用道具 举报

 楼主| 发表于 2014-10-16 09:16:36 | 显示全部楼层
谢谢   skybot 的回复
不过不是这种结构的,是树形结构的。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-10-22 11:48 , Processed in 0.093515 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表