184、无限级树型菜单

184、无限级树型菜单

1    把如下代码复制到<head></head>之间

 

<script type="text/javascript">

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(sto/minus.png)":"url(sto/plus.png)"):"url(sto/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(sto/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(sto/minus.png)":"url(sto/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>之间

 

 

 

 

 

 

 

<ul id="containerul">

  <li> 精彩网站

    <ul>

      <li> <a href="http://7stk.com">网页特效集锦</a>

      </li>

      <li>

        <a href="http://7stk.com/tool/">网页工具库</a>

      </li>

      <li>

        <a href="http://7stk.com/tool/html_edit.htm">在线html编辑器</a>

      </li>

    </ul>

  </li>

  <li> 网页特效集锦

    <ul>

      <li>

        <a href="http://7stk.com/">网站栏目</a>

        <ul>

          <li>

            <a href="http://7stk.com/background/index.htm">背景特效</a>

          </li>

          <li>

            <a href="http://7stk.com/moban/index.htm">整站模板</a>

          </li>

          <li>

            <a href="http://7stk.com/img/index.htm">图片特效</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>

Write a comment

Comments: 0