收縮下拉菜單收集
1.打開時候展開狀態
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Div+CSS+JS樹型菜單，可刷新</title>
<styletype="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菜單的行高和背景色*/
}
/*==================一級目錄===================*/
#nava{
width:160px;
display:block;
padding-left:20px;
/*Width(一定要)，否則下面的Li會變形*/
}
#navli{
background:#CCC;/*一級目錄的背景色*/
border-bottom:#FFF1pxsolid;/*下面的一條白邊*/
float:left;
/*float：left,本不應該設置，但由於在Firefox不能正常顯示
繼承Nav的width,限制寬度，li自動向下延伸*/
}
#navlia:hover{
background:#CC0000;/*一級目錄onMouseOver顯示的背景色*/
}
#nava:link{
color:#666;text-decoration:none;
}
#nava:visited{
color:#666;text-decoration:none;
}
#nava:hover{
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二級目錄===================*/
#navliul{
list-style:none;
text-align:left;
}
#navliulli{
background:#EBEBEB;/*二級目錄的背景色*/
}
#navliula{
padding-left:20px;
width:160px;
/*padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/
}
/*下面是二級目錄的鏈接樣式*/
#navliula:link{
color:#666;text-decoration:none;
}
#navliula:visited{
color:#666;text-decoration:none;
}
#navliula:hover{
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/*二級onmouseover的字體顏色、背景色*/
}
/*==============================*/
#navli:hoverul{
left:auto;
}
#navli.sfhoverul{
left:auto;
}
#content{
clear:left;
}
#navul.collapsed{
display:none;
}
-->
#PARENT{
width:300px;
padding-left:20px;
}
</style>
</head>
<body>
<divid="PARENT">
<ulid="nav">
<li><ahref="#Menu=ChildMenu1"id="my_site"onclick="DoMenu("ChildMenu1")">我的網站</a>
<ulid="ChildMenu1"class="collapsed">
<li><ahref="#">www.yd631.com</a></li>
<li><ahref="#">www.yd631.com</a></li>
<li><ahref="#">www.yd631.com</a></li>
</ul>
</li>
<li><ahref="#Menu=ChildMenu2"onclick="DoMenu("ChildMenu2")">我的帳務</a>
<ulid="ChildMenu2"class="collapsed">
<li><ahref="#">支付</a></li>
<li><ahref="#">網上支付</a></li>
<li><ahref="#">登記匯款</a></li>
<li><ahref="#">在線招領</a></li>
<li><ahref="#">歷史帳務</a></li>
</ul>
</li>
<li><ahref="#Menu=ChildMenu3"onclick="DoMenu("ChildMenu3")">網站管理</a>
<ulid="ChildMenu3"class="collapsed">
<li><ahref="#">登錄</a></li>
<li><ahref="#">管理</a></li>
<li><ahref="#">管理</a></li>
<li><ahref="#">管理</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<scripttype=text/javascript><!--
varLastLeftID="";
functionmenuFix(){
varobj=document.getElementById("nav").getElementsByTagName("li");
for(vari=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(newRegExp("(?|^)sfhover/b"),"");
}
}
}
functionDoMenu(emid)
{
varobj=document.getElementById(emid);
obj.className=(obj.className.toLowerCase()=="expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID))//關閉上一個Menu
{
document.getElementById(LastLeftID).className="collapsed";
}
LastLeftID=emid;
}
functionGetMenuID()
{
varMenuID="";
var_paramStr=newString(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=newArray(_paramArr.length);
}
//取所有#後面的，菜單只需用到Menu
//for(vari=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();
varmy_site_obj=document.getElementById("my_site");
my_site_obj.onclick();
--></script>
2.打開時候收縮狀態
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Div+CSS+JS樹型菜單，可刷新</title>
<styletype="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菜單的行高和背景色*/
}
/*==================一級目錄===================*/
#nava{
width:160px;
display:block;
padding-left:20px;
/*Width(一定要)，否則下面的Li會變形*/
}
#navli{
background:#CCC;/*一級目錄的背景色*/
border-bottom:#FFF1pxsolid;/*下面的一條白邊*/
float:left;
/*float：left,本不應該設置，但由於在Firefox不能正常顯示
繼承Nav的width,限制寬度，li自動向下延伸*/
}
#navlia:hover{
background:#CC0000;/*一級目錄onMouseOver顯示的背景色*/
}
#nava:link{
color:#666;text-decoration:none;
}
#nava:visited{
color:#666;text-decoration:none;
}
#nava:hover{
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二級目錄===================*/
#navliul{
list-style:none;
text-align:left;
}
#navliulli{
background:#EBEBEB;/*二級目錄的背景色*/
}
#navliula{
padding-left:20px;
width:160px;
/*padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/
}
/*下面是二級目錄的鏈接樣式*/
#navliula:link{
color:#666;text-decoration:none;
}
#navliula:visited{
color:#666;text-decoration:none;
}
#navliula:hover{
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/*二級onmouseover的字體顏色、背景色*/
}
/*==============================*/
#navli:hoverul{
left:auto;
}
#navli.sfhoverul{
left:auto;
}
#content{
clear:left;
}
#navul.collapsed{
display:none;
}
-->
#PARENT{
width:300px;
padding-left:20px;
}
</style>
</head>
<body>
<divid="PARENT">
<ulid="nav">
<li><ahref="#Menu=ChildMenu1"onclick="DoMenu("ChildMenu1")">我的網站</a>
<ulid="ChildMenu1"class="collapsed">
<li><ahref="#">www.yd631.com</a></li>
<li><ahref="#">www.yd631.com</a></li>
<li><ahref="#">www.yd631.com</a></li>
</ul>
</li>
<li><ahref="#Menu=ChildMenu2"onclick="DoMenu("ChildMenu2")">我的帳務</a>
<ulid="ChildMenu2"class="collapsed">
<li><ahref="#">支付</a></li>
<li><ahref="#">網上支付</a></li>
<li><ahref="#">登記匯款</a></li>
<li><ahref="#">在線招領</a></li>
<li><ahref="#">歷史帳務</a></li>
</ul>
</li>
<li><ahref="#Menu=ChildMenu3"onclick="DoMenu("ChildMenu3")">網站管理</a>
<ulid="ChildMenu3"class="collapsed">
<li><ahref="#">登錄</a></li>
<li><ahref="#">管理</a></li>
<li><ahref="#">管理</a></li>
<li><ahref="#">管理</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<scripttype=text/javascript><!--
varLastLeftID="";
functionmenuFix(){
varobj=document.getElementById("nav").getElementsByTagName("li");
for(vari=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(newRegExp("(?|^)sfhover/b"),"");
}
}
}
functionDoMenu(emid)
{
varobj=document.getElementById(emid);
obj.className=(obj.className.toLowerCase()=="expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID))//關閉上一個Menu
{
document.getElementById(LastLeftID).className="collapsed";
}
LastLeftID=emid;
}
functionGetMenuID()
{
varMenuID="";
var_paramStr=newString(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=newArray(_paramArr.length);
}
//取所有#後面的，菜單只需用到Menu
//for(vari=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>
推薦閱讀：
※薊縣35個火到不行的農家院！史上最全！（具體到農家菜單）
※低熱量美食菜單, 讓你咋吃都不胖!
※4大要點！定製婚宴菜單
※一份菜單，揭秘泰坦尼克號上的貧富差距
※《中文菜單英文譯法》(2)