crazychaz: Menu

Beitrag lesen

hier die auszüge
die php datei
<script type="text/javascript" src="menuscript01.js"></script>
</head>

<body bgcolor="#000000">
<h1>Hybrid Theory</h1>

<h3>
<ul id="containerul">
<li>1. Papercut</a><br />  </li>
<li>2. One Step Closer  <br /> </li>
<li>3. With You  <br /> </li>
<li>4. Points Of Authority   <br /> </li>
<li>5. Crawling  <br /> </li>
<li>6. Runaway  <br /> </li>
<li>7. By Myself   <br /> </li>
<li>8. In The End  <br /> </li>
<li>9. A Place For My Head <br /> </li>
<li>10. Forgotten  <br /> </li>
<li>11. Cure For The Itch  <br /> </li>
<li>12. Pushing Me Away<br /></li></ul> </h3>
<script type="text/javascript">
initiate();
</script>

die css datei

#containerul li{
margin:           0 0 0 20px;   (left margin für Einrückung)
color:            #00AD66;
font-family:      Verdana,Arial,Helvetica;
font-size:        10px;
text-decoration:  none;
text-transform:   uppercase;
}

die js datei

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(minus01.gif)":"url(plus01.gif)"):"url(plus01.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(plus01.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(minus01.gif)":"url(plus01.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();

}