Vertikales Navigationsmenü

[Edgar Ehritt]

Hallo Thomas,

zunächst sollten die Elemente des Menüs einheitlich sein. Also bitte keine verschiedenen Typen von Listen dazu verwenden. Das führt nur zu Verwirrung (insbesondere durch den Mehraufwand im Javascript). Das sieht dann etwas so aus:

<ul id="menu">  
	<li>  
		<a href="#">1. Menuitem</a>  
	</li>  
	<li>  
		<a href="#">2. Menuitem</a>  
		<ul>  
			<li><a href="#">1. Submenu</a></li>  
			<li><a href="#">2. Submenu</a></li>  
		</ul>  
	</li>  
	<!-- ******************************* 1. Ordnung -->  
	<li>  
		<a href="#">3. Menuitem</a>  
		<ul>    <!-- *************** 2. Ordnung -->  
			<li>  
				<a href="#">1. Submenu</a>  
				<ul>    <!-- 3. Ordnung -->  
					<li><a href="#">1. Subsubmenu</a></li>  
					<li><a href="#">2. Subsub-menu</a></li>  
				</ul>  
			</li>  
			<li><a href="#">2. Submenu</a></li>  
		</ul>  
	</li>  
	<li>  
		<a href="#">4. Menuitem</a>  
	</li>  
</ul>

Bei dem Script bitte ich bei jeder stelle, die unklar ist, nachzufragen!

window.onload=menu;  
function menu(){  
	// Untermenüs ausblenden  
	var l=document.getElementById('menu').getElementsByTagName('ul')  
  
	for(var i=0;i<l.length;i++){  
		l.item(i).style.display='none';  
	}  
	// onclick-Event Elementen verteilen  
	l=document.getElementById('menu').childNodes  
	// alle Elemente <li> erfassen und rekursif untersuchen  
	for(i=0;i<l.length;i++){  
		if(l.item(i).tagName && l.item(i).tagName.toLowerCase()=='li'){  
			setEvent(l.item(i))  
		}  
	}  
}  
function setEvent(e){  
	var l=(e.getElementsByTagName('ul').item(0)) ? e.getElementsByTagName('ul').item(0).childNodes : ''  
	if(l.length>0){  
		// onclick-Eventsetzen  
		//  
		// fals nicht auf IE 6 Rücksicht genommen werden muss  
		// sollte Folgendes durch  
		// e.setAttribute('onclick','show(this);return false;')  
		// ersetzt werden  
		e.onclick=function (){show(this);return false;}  
  
		// Rekursion  
		for(i=0;i<l.length;i++){  
			if(l.item(i).tagName && l.item(i).tagName.toLowerCase()=='li'){  
				setEvent(l.item(i))  
			}  
		}  
	}  
}  
function show(e){  
	// onclick soll immer nur an einem Element Effekte haben  
	//  
	// Elemenent e ist nicht Listenpunkt 1. Ordnung  
	if(e.parentNode!=document.getElementById('menu')){  
		// es wurde noch nichts ausgeblendet oder eingeblendent  
		if(!document.getElementById('my_event')){  
			// per id wird Ein-/Ausblenden markiert  
			//  
			// auch hier wieder der IE-6-Hinweis (setAttribute())  
			e.id='my_event'  
			// ein- oder ausblenden  
			e.getElementsByTagName('ul').item(0).style.display=(e.getElementsByTagName('ul').item(0).style.display=='none') ? 'block' : 'none'  
		}  
	}  
	// Elemenent e ist Listenpunkt 1. Ordnung  
	else{  
		// es wurde bereits ein-/ausgeblendet  
		if(document.getElementById('my_event')){  
			// nicht mehr ein-/ausblenden  
			// da e 1. Ordung ist, muss für weitere  
			// onclick-Events die id gelöscht werden  
			document.getElementById('my_event').id=''  
		}  
			// Element 1. Ordnung wurde angeklickt  
		else	e.getElementsByTagName('ul').item(0).style.display=(e.getElementsByTagName('ul').item(0).style.display=='none') ? 'block' : 'none'  
	}  
	  
}

Gruß aus Berlin!
eddi