特效代码 订阅所有特效代码的日志

刷新保持状态的折叠菜单

作者:admin 日期:2009-06-10

字体大小: 小 中 大

 

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>Div+CSS+JS树型菜单，可刷新</title>  
  6. <meta name="description" content="http://www.NETAny.net">  
  7. <style type="text/css">  
  8. <!--   
  9. *{margin:0;padding:0;border:0;}   
  10. body {   
  11. font-family: arial, 宋体, serif;   
  12. font-size:12px;   
  13. }   
  14. #nav {   
  15. width:180px;   
  16. line-height: 24px;   
  17. list-style-type: none;   
  18. text-align:left;   
  19. /*定义整个ul菜单的行高和背景色*/   
  20. }   
  21. /*==================一级目录===================*/   
  22. #nav a {   
  23. width: 160px;   
  24. display: block;   
  25. padding-left:20px;   
  26. /*Width(一定要)，否则下面的Li会变形*/   
  27. }   
  28. #nav li {   
  29. background:#CCC; /*一级目录的背景色*/   
  30. border-bottom:#FFF 1px solid; /*下面的一条白边*/   
  31. float:left;   
  32. /*float：left,本不应该设置，但由于在Firefox不能正常显示   
  33. 继承Nav的width,限制宽度，li自动向下延伸*/   
  34. }   
  35. #nav li a:hover{   
  36. background:#CC0000; /*一级目录onMouseOver显示的背景色*/   
  37. }   
  38. #nav a:link  {   
  39. color:#666; text-decoration:none;   
  40. }   
  41. #nav a:visited  {   
  42. color:#666;text-decoration:none;   
  43. }   
  44. #nav a:hover  {   
  45. color:#FFF;text-decoration:none;font-weight:bold;   
  46. }   
  47. /*==================二级目录===================*/   
  48. #nav li ul {   
  49. list-style:none;   
  50. text-align:left;   
  51. }   
  52. #nav li ul li{   
  53. background: #EBEBEB; /*二级目录的背景色*/   
  54. }   
  55. #nav li ul a{   
  56. padding-left:20px;   
  57. width:160px;   
  58. /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/   
  59. }   
  60. /*下面是二级目录的链接样式*/   
  61. #nav li ul a:link  {   
  62. color:#666; text-decoration:none;   
  63. }   
  64. #nav li ul a:visited  {   
  65. color:#666;text-decoration:none;   
  66. }   
  67. #nav li ul a:hover {   
  68. color:#F3F3F3;   
  69. text-decoration:none;   
  70. font-weight:normal;   
  71. background:#CC0000;   
  72. /* 二级onmouseover的字体颜色、背景色*/   
  73. }   
  74. /*==============================*/   
  75. #nav li:hover ul {   
  76. left: auto;   
  77. }   
  78. #nav li.sfhover ul {   
  79. left: auto;   
  80. }   
  81. #content {   
  82. clear: left;   
  83. }   
  84. #nav ul.collapsed {   
  85. display: none;   
  86. }   
  87. -->  
  88. #PARENT{   
  89. width:300px;   
  90. padding-left:20px;   
  91. }   
  92. </style>  
  93. </head>  
  94. <body>  
  95. <div id="PARENT">  
  96. <ul id="nav">  
  97. <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a>  
  98. <ul id="ChildMenu1" class="collapsed">  
  99. <li><a href="http://www.webkey.cn" target="_blank">www.netany.net</a></li>  
  100. <li><a href="http://www.webkey.cn" target="_blank">www.netany.net</a></li>  
  101. <li><a href="http://www.webkey.cn" target="_blank">www.netany.net</a></li>  
  102. </ul>  
  103. </li>  
  104. <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>  
  105. <ul id="ChildMenu2" class="collapsed">  
  106. <a href="http://www.netany.net" target="_blank">支付</a></li>  
  107. <li><a href="#">网上支付</a></li>  
  108. <li><a href="#">登记汇款</a></li>  
  109. <li><a href="#">在线招领</a></li>  
  110. <li><a href="#">历史帐务</a></li>  
  111. </ul>  
  112. </li>  
  113. <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>  
  114. <ul id="ChildMenu3" class="collapsed">  
  115. <li><a href="#">登录</a></li>  
  116. <a href="http://www.netany.net" target="_blank">管理</a></li>  
  117. <li><a href="#">管理</a></li>  
  118. <li><a href="#">管理</a></li>  
  119. </ul>  
  120. </li>  
  121. <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>  
  122. <ul id="ChildMenu4" class="collapsed">  
  123. <li><a href="#">登录</a></li>  
  124. <a href="http://www.netany.net" target="_blank">管理</a></li>  
  125. <li><a href="#">管理</a></li>  
  126. <li><a href="#">管理</a></li>  
  127. </ul>  
  128. </li>  
  129. </ul>  
  130. </div>  
  131. </body>  
  132. </html>  
  133. <script type=text/javascript><!--   
  134. var LastLeftID = "";   
  135. function menuFix() {   
  136. var obj = document.getElementById("nav").getElementsByTagName("li");   
  137. for (var i=0; i<obj.length; i++) {   
  138. obj[i].onmouseover=function() {   
  139. this.className+=(this.className.length>0? " ": "") + "sfhover";   
  140. }   
  141. obj[i].onMouseDown=function() {   
  142. this.className+=(this.className.length>0? " ": "") + "sfhover";   
  143. }   
  144. obj[i].onMouseUp=function() {   
  145. this.className+=(this.className.length>0? " ": "") + "sfhover";   
  146. }   
  147. obj[i].onmouseout=function() {   
  148. thisthis.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");   
  149. }   
  150. }   
  151. }   
  152. function DoMenu(emid)   
  153. {   
  154. var obj = document.getElementById(emid);   
  155. obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");   
  156. if((LastLeftID!="")&&(emid!=LastLeftID))    //关闭上一个Menu   
  157. {   
  158. document.getElementById(LastLeftID).className = "collapsed";   
  159. }   
  160. LastLeftID = emid;   
  161. }   
  162. function GetMenuID()   
  163. {   
  164. var MenuID="";   
  165. var _paramStr = new String(window.location.href);   
  166. var _sharpPos = _paramStr.indexOf("#");   
  167. if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)   
  168. {   
  169. _paramStr_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);   
  170. }   
  171. else   
  172. {   
  173. _paramStr = "";   
  174. }   
  175. if (_paramStr.length > 0)   
  176. {   
  177. var _paramArr = _paramStr.split("&");   
  178. if (_paramArr.length>0)   
  179. {   
  180. var _paramKeyVal = _paramArr[0].split("=");   
  181. if (_paramKeyVal.length>0)   
  182. {   
  183. MenuID = _paramKeyVal[1];   
  184. }   
  185. }   
  186. /*   
  187. if (_paramArr.length>0)   
  188. {   
  189. var _arr = new Array(_paramArr.length);   
  190. }   
  191. //取所有#后面的，菜单只需用到Menu   
  192. //for (var i = 0; i < _paramArr.length; i++)   
  193. {   
  194. var _paramKeyVal = _paramArr[i].split('=');   
  195. if (_paramKeyVal.length>0)   
  196. {   
  197. _arr[_paramKeyVal[0]] = _paramKeyVal[1];   
  198. }   
  199. }   
  200. */   
  201. }   
  202. if(MenuID!="")   
  203. {   
  204. DoMenu(MenuID)   
  205. }   
  206. }   
  207. GetMenuID();    //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果   
  208. menuFix();   
  209. --></script>  

 


文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.