display tree
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>网页教学网无限级树型菜单演示</title>
<scripttype="text/javascript">
//morejavascriptfromhttp://www.webjx.com
vartemp,temp2,cookieArray,cookieArray2,cookieCount;
functioninitiate(){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=newArray();
for(iincookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(//g,"")]=cookieArray[i].split("=")[1].replace(//g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):newArray();
temp=document.getElementById("containerul");
for(varo=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);
}
}
}
functionshowhide(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)";
}
functionwriteCookie(){//Runsthroughthemenuandputsthe"states"ofeachnestedlistintoanarray,thearrayisthenjoinedtogetherandassignedtoacookie.
cookieArray=newArray()
for(varq=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="+newDate(newDate().getTime()+365*24*60*60*1000).toGMTString();
}
</script>
<styletype="text/css"><!--
#containerul,#containerulul{
text-align:left;
margin:0;/*Removesbrowserdefaultmarginsappliedtothelists.*/
padding:0;/*Removesbrowserdefaultpaddingappliedtothelists.*/
}
#containerulli{
margin:00030px;/*Aleftmargintoindentthelistitemsandgivethemenuasenseofstructure.*/
padding:0;/*Removesbrowserdefaultpaddingappliedtothelistitems.*/
list-style-type:none;/*Removesthebulletpointthatusuallygoesnexttoeachiteminalist.*/
}
#containerul.symbols{/*Variousstylestopositionthesymbolsnexttotheitemsinthemenu.*/
float:left;
width:12px;
height:1em;
background-position:050%;
background-repeat:no-repeat;
}
--></style>
</head>
<body>
<ulid="containerul">
<li>网页教学网
<ul>
<li><ahref="http://www.webjx.com/htmldata/sort/2.html">建站指南</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/3.html">网页制作</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/4.html">动画制作</a>
</li>
</ul>
</li>
<li>网络编程
<ul>
<li>
<ahref="http://www.webjx.com/htmldata/sort/24.html">Asp.net</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/25.html">Asp</a>
<ul>
<li>
<ahref="http://www.webjx.com/htmldata/sort/26.html">PHP</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/28.html">数据库</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/29.html">CGI</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/29.html">java网络编程</a>
<ul>
<li>
<ahref="http://www.webjx.com/htmldata/sort/26.html">jsp</a>
</li>
<li>
<ahref="http://www.webjx.com/htmldata/sort/28.html">j2ee</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
<scripttype="text/javascript">
initiate();//Thismustbeplacedimmediatelyafterthemenuinordertoformatitproperly.
</script>
</p>
<h3>树形菜单</h3>
<p>说明：一个很容易制作树形菜单，你可以无限级的添加下级菜单，菜单是通过列表方式写成的</p>
</body>
</html>