1.打開時候展開狀態
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Div+CSS+JS樹型菜單，可刷新</title> 
<style type="text/css">... 
<!-- 
*{...}{margin:0;padding:0;border:0;} body {...}{ font-family: arial, 宋體, serif; font-size:12px; 
} #nav {...}{ width:180px; line-height: 24px; list-style-type: none; text-align:left; /**//*定義整個ul菜單的行高和背景色*/ } /**//*==================一級目錄===================*/ #nav a {...}{ width: 160px; display: block; padding-left:20px; /**//*Width(一定要)，否則下面的Li會變形*/ } #nav li {...}{ background:#CCC; /**//*一級目錄的背景色*/ border-bottom:#FFF 1px solid; /**//*下面的一條白邊*/ float:left; /**//*float：left,本不應該設置，但由於在Firefox不能正常顯示 繼承Nav的width,限制寬度，li自動向下延伸*/ } #nav li a:hover{...}{ background:#CC0000; /**//*一級目錄onMouseOver顯示的背景色*/ } #nav a:link {...}{ color:#666; text-decoration:none; } #nav a:visited {...}{ color:#666;text-decoration:none; } #nav a:hover {...}{ color:#FFF;text-decoration:none;font-weight:bold; } /**//*==================二級目錄===================*/ #nav li ul {...}{ list-style:none; text-align:left; } #nav li ul li{...}{ background: #EBEBEB; /**//*二級目錄的背景色*/ } #nav li ul a{...}{ padding-left:20px; width:160px; /**//* padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/ } /**//*下面是二級目錄的鏈接樣式*/ #nav li ul a:link {...}{ color:#666; text-decoration:none; } #nav li ul a:visited {...}{ color:#666;text-decoration:none; } #nav li ul a:hover {...}{ color:#F3F3F3; text-decoration:none; font-weight:normal; background:#CC0000; /**//* 二級onmouseover的字體顏色、背景色*/ } /**//*==============================*/ #nav li:hover ul {...}{ left: auto; } #nav li.sfhover ul {...}{ left: auto; } #content {...}{ clear: left; } #nav ul.collapsed {...}{ display: none; } --> #PARENT{...}{ width:300px; padding-left:20px; 
} </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" id="my_site" onclick="DoMenu('ChildMenu1')">我的網站</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="#">www.yd631.com</a></li> <li><a href="#">www.yd631.com</a></li> <li><a href="#">www.yd631.com</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a> <ul id="ChildMenu2" class="collapsed"> <li><a href="#">支付</a></li> <li><a href="#">網上支付</a></li> <li><a href="#">登記匯款</a></li> <li><a href="#">在線招領</a></li> <li><a href="#">歷史帳務</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">登錄</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> </ul> </div> </body> </html> <script type=text/javascript>...<!-- var LastLeftID = ""; function menuFix() ...{ var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) ...{ obj[i].onmouseover=function() ...{ this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() ...{ this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() ...{ this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() ...{ thisthis.className=this.className.replace(new RegExp("( ?|^)sfhover/b"), ""); } } } function DoMenu(emid) ...{ var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //關閉上一個Menu ...{ document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() ...{ var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) ...{ _paramStr_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else ...{ _paramStr = ""; } if (_paramStr.length > 0) ...{ var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) ...{ var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) ...{ MenuID = _paramKeyVal[1]; } } /**//* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#後面的，菜單隻需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") ...{ DoMenu(MenuID) } } GetMenuID(); //*這兩個function的順序要注意一下，不然在Firefox裏GetMenuID()不起效果 menuFix(); var my_site_obj=document.getElementById("my_site"); my_site_obj.onclick(); --></script> 2.打開時候收縮狀態
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Div+CSS+JS樹型菜單，可刷新</title> <style type="text/css">... <!-- *{...}{margin:0;padding:0;border:0;} body {...}{ font-family: arial, 宋體, serif; font-size:12px; } #nav {...}{ width:180px; line-height: 24px; list-style-type: none; text-align:left; /**//*定義整個ul菜單的行高和背景色*/ } /**//*==================一級目錄===================*/ #nav a {...}{ width: 160px; display: block; padding-left:20px; /**//*Width(一定要)，否則下面的Li會變形*/ } #nav li {...}{ background:#CCC; /**//*一級目錄的背景色*/ border-bottom:#FFF 1px solid; /**//*下面的一條白邊*/ float:left; /**//*float：left,本不應該設置，但由於在Firefox不能正常顯示 繼承Nav的width,限制寬度，li自動向下延伸*/ } #nav li a:hover{...}{ background:#CC0000; /**//*一級目錄onMouseOver顯示的背景色*/ } #nav a:link {...}{ color:#666; text-decoration:none; } #nav a:visited {...}{ color:#666;text-decoration:none; } #nav a:hover {...}{ color:#FFF;text-decoration:none;font-weight:bold; } /**//*==================二級目錄===================*/ #nav li ul {...}{ list-style:none; text-align:left; } #nav li ul li{...}{ background: #EBEBEB; /**//*二級目錄的背景色*/ } #nav li ul a{...}{ padding-left:20px; width:160px; /**//* padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/ } /**//*下面是二級目錄的鏈接樣式*/ #nav li ul a:link {...}{ color:#666; text-decoration:none; } #nav li ul a:visited {...}{ color:#666;text-decoration:none; } #nav li ul a:hover {...}{ color:#F3F3F3; text-decoration:none; font-weight:normal; background:#CC0000; /**//* 二級onmouseover的字體顏色、背景色*/ } /**//*==============================*/ #nav li:hover ul {...}{ left: auto; } #nav li.sfhover ul {...}{ left: auto; } #content {...}{ clear: left; } #nav ul.collapsed {...}{ display: none; } --> #PARENT{...}{ width:300px; padding-left:20px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的網站</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="#">www.yd631.com</a></li> <li><a href="#">www.yd631.com</a></li> <li><a href="#">www.yd631.com</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a> <ul id="ChildMenu2" class="collapsed"> <li><a href="#">支付</a></li> <li><a href="#">網上支付</a></li> <li><a href="#">登記匯款</a></li> <li><a href="#">在線招領</a></li> <li><a href="#">歷史帳務</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">登錄</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> </ul> </div> </body> </html> <script type=text/javascript>...<!-- var LastLeftID = ""; function menuFix() ...{ var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) ...{ obj[i].onmouseover=function() ...{ this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() ...{ this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() ...{ this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() ...{ thisthis.className=this.className.replace(new RegExp("( ?|^)sfhover/b"), ""); } } } function DoMenu(emid) ...{ var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //關閉上一個Menu ...{ document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() ...{ var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) ...{ _paramStr_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else ...{ _paramStr = ""; } if (_paramStr.length > 0) ...{ var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) ...{ var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) ...{ MenuID = _paramKeyVal[1]; } } /**//* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#後面的，菜單隻需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") ...{ DoMenu(MenuID) } } GetMenuID(); //*這兩個function的順序要注意一下，不然在Firefox裏GetMenuID()不起效果 menuFix(); --></script>