一个树型菜单

- 中国WEB开发者网络 (http://www.webasp.net)
-- 网页特效 (http://www.webasp.net/javascript/)
--- 一个树型菜单 (http://www.webasp.net/javascript/1/303.htm)
-- 发布日期： 2005-06-02
<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供！ -->
<!-- 要实现此效果需要 2 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<HEAD></HEAD>区域中： -->

<script type="text/javascript">
//more javascript from http://www.webjx.com
var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

cookieCount=0;

if(document.cookie){

cookieArray=document.cookie.split(";");
cookieArray2=new Array();

for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}

}

cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

temp=document.getElementById("containerul");

for(var o=0;o<temp.getElementsByTagName("li").length;o++){

if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}

temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}

cookieCount++;

}
else{

temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(tree/page.png)";

temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

}

}

}



function showhide(el){

el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(tree/minus.png)":"url(tree/plus.png)";

}



function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

cookieArray=new Array()

for(var q=0;q<temp.getElementsByTagName("li").length;q++){

if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

}
}

}

document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}

</script>

<style type="text/css"><!--

#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}

--></style>



<!-- 第 2 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页教学网无限级树型菜单演示</title>
<script type="text/javascript">
//more javascript from http://www.webjx.com
var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

cookieCount=0;

if(document.cookie){

cookieArray=document.cookie.split(";");
cookieArray2=new Array();

for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}

}

cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

temp=document.getElementById("containerul");

for(var o=0;o<temp.getElementsByTagName("li").length;o++){

if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(../images/303/minus.gif)":"url(../images/303/plus.gif)"):"url(../images/303/plus.gif)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}

temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}

cookieCount++;

}
else{

temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(../images/303/page.gif)";

temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

}

}

}



function showhide(el){

el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(../images/303/minus.gif)":"url(../images/303/plus.gif)";

}



function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

cookieArray=new Array()

for(var q=0;q<temp.getElementsByTagName("li").length;q++){

if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

}
}

}

document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}

</script>

<style type="text/css"><!--

#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}

--></style>
</head>

<body>
<ul id="containerul">
<li> WEB开发者网络
<ul>
<li> <a href="http://www.webasp.net/article/common/class.htm" target=_balnk>教程分类</a>
<ul>
<li>
<a href="http://www.webasp.net/article/class1/" target=_balnk>Asp</a>
</li>
<li>
<a href="http://www.webasp.net/article/class3/" target=_balnk>Php</a>
</li>
<li>
<a href="http://www.webasp.net/article/class4/" target=_balnk>Jsp</a>
</li>
<li>
<a href="http://www.webasp.net/article/class2/" target=_balnk>Asp.net</a>
</li>
</ul>
</li>
<li>
<a href="http://www.webasp.net/download/common/class.htm" target=_balnk>源码分类</a>
<ul>
<li>
<a href="http://www.webasp.net/download/class1/" target=_balnk>Asp</a>
</li>
<li>
<a href="http://www.webasp.net/download/class2/" target=_balnk>Php</a>
</li>
<li>
<a href="http://www.webasp.net/download/class3/" target=_balnk>Jsp</a>
</li>
<li>
<a href="http://www.webasp.net/download/class4/" target=_balnk>Asp.net</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<p>
<script type="text/javascript">
initiate(); // This must be placed immediately after the menu in order to format it properly.
</script>
</p>

</body>
</html>

webasp.net