Switch Menü

Beispiel

Links

- Google.de
- Lycos.de

Links 2

- Cruento.org
- Dubiously.de
- Divine

Links 3

- Beautyvictims.net

Links 4

- Web.de
- arcor.de

Das hier
<style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ECECFF; color:#000000; width:140px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #000000;/* */ } .submenu{ margin-bottom: 0.5em; } </style> <script type="text/javascript"> /*********************************************** *** HTTP://DUBIOUSLY.DE/TUTORIALS ***********************************************/ var persistmenu="yes" //"yes" or "no". Jedes Menü muss mit der 1 beginnen bsp: (id="sub1", id="sub2", etc) var persisttype="sitewide" //schreib "sitewide" damit das menü auf der ganzen seite besthen kann,und "local" damit das menü nur auf der seite hier ist if (document.getElementById){ //changing document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //D.de change if(el.style.display != "block"){ //d.de change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //d.de change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script>
kommt in den <HEAD> Bereich.

Und das ist das Menü, dass kommt an die beliebige Stelle im HTML
 <div id="masterdiv" style="width: 500; height: 221"> <div class="menutitle" onclick="SwitchMenu('sub1')">Links</div> <span class="submenu" id="sub1"> - <a href="http://link.de">LINK</a><br> - <a href="http://link.de">LINK</a> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">Links 2</div> <span class="submenu" id="sub2"> - <a href="http://link.de">Link</a><br> - <a href="http://link.de">LINK</a><br> - <a href="http://link.com">LINK</a> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Links 3</div> <span class="submenu" id="sub3"> - <a href="http://link.de">LINK</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Links 4</div> <span class="submenu" id="sub4"> - <a href="http://link.de">LINK</a><br> - <a href="http://link.de">LINK</a> </span> </div>

Zu ändern, aus dem <head> bereich:

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

Beliebig verändern (farbe größe usw.)

Zu ändern, im HTML Bereich:

<div id="masterdiv" style="width: 500; height: 221">
Die Größe ändern und sonst noch die Links und Überschriften!