Javascript Js4aLL Navigation Aufklappmenue

<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
//list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>

Aufklappmenü

Dieses Menü ist eigentlich kein echtes javascript Menü sondern vielmehr eine kombination zwischen Javascript und CSS.

Aber ein Vorteil ist, dieses Menü ist sehr flexibel und erweiterbar....

Das eigentliche Menü besteht aus normalen Links die als Liste formatiert sind wodurch man im Grunde beliebige Untermenüs erzeugen kann
z.b. so

<ul>
   <li id="foldheader">Menü 1</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.link.de">Link</a></li>
      <li><a href="http://www.link.de">Link</a></li>
      <li><a href="http://www.link.de">Link</a></li>
   </ul>

   <li id="foldheader">Menü 2</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.link.de">Link</a></li>
      <li><a href="http://www.link.de">Link</a></li>
      <li><a href="http://www.link.de">Link</a></li>
   </ul>

   <li id="foldheader">Menü3</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.link.de">Link</a></li>
      <li><a href="http://www.link.de">Link</a></li>
      <li id="foldheader">Untermenü 3-1</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.link.de">Link</a></li>
         <li><a href="http://www.link.de">Link</a></li>
      </ul>
      <li><a href="http://www.link.de">Link</a></li>
   </ul>
</ul>