Edgar Ehritt: Fehler in Vertikaler Navigation

Beitrag lesen

SELF-Forum

Fehler in Vertikaler Navigation

Edgar Ehritt
– Informationen zu den Bewertungsregeln

Hallo Thomas,

an das Problem erinnere ich mich (vgl. </archiv/2010/1/t194363/>). Wünschenswert wäre es gewesen, wenn Du nicht nur übernommen hättest, sondern Dir auch Gedanken um die Funktionalität gemacht hättest.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
        <head>  
                <style type="text/css">  
			ul {width:150px}  
			li {border:red 1px solid;background:#ddd}  
			a  {display:block}  
                </style>  
                <title>  
                        Test Document  
                </title>  
<script type="text/javascript">

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;}  
		e.style.background='red'  
  
		// Rekursion  
		for(var i=0;i<l.length;i++){  
			if(l.item(i).tagName && l.item(i).tagName.toLowerCase()=='li'){  
				setEvent(l.item(i))  
			}  
		}  
	}  
	// schwer war es nicht; der Teil fehlte Dir noch:  
	else{  
		e.onclick=function (){location.href=this.getElementsByTagName('a').item(0).href;return false;}  
	}  
}  
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{  
			l=e.getElementsByTagName('ul')  
			// Ausblenden aller Elemente  
			if(l.item(0).style.display=='block'){  
				for(i=0;i<l.length;i++){  
					l.item(i).style.display='none'  
				}  
			}  
			// Einblenden der Liste 2. Ordnung  
			else{  
				l.item(0).style.display='block'  
			}  
		}  
	}  
	  
}

</script>  
        </head>  
<body>  
<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>  
	<li>  
		<a href="#">3. Menuitem</a>  
		<ul>  
			<li>  
				<a href="#">1. Submenu</a>  
				<ul>  
					<li><a href="http://de.selfhtml.org/">1. Subsubmenu</a></li>  
					<li><a href="http://de.selfhtml.org/#2">2. Subsub-menu</a></li>  
				</ul>  
			</li>  
			<li><a href="#">2. Submenu</a></li>  
		</ul>  
	</li>  
	<li>  
		<a href="#">4. Menuitem</a>  
	</li>  
</ul>  
</body>  
</html>

Gruß aus Berlin!
eddi

Beitrag melden
–
Informationen zu den Bewertungsregeln