ThomasG: Fehler in Vertikaler Navigation

SELF-Forum

Fehler in Vertikaler Navigation

ThomasG
– Informationen zu den Bewertungsregeln

Hallo,

wer kann mir bitte helfen?
Ich habe hier aus diesem Forum eine vertikale Navigation mit Javascript, die bei mir nicht richtig funktioniert. Ich benötige eine Navigation

für die Realiesierung unserer Vereins-HP mit mindestens 3 Ebenen. Die unten aufgeführte Navigation würde dies auch so erfüllen, bis auf das

Fehlverhalten, welches ich im Anschluss erklärte.
Bei allen Menüpunkten mit Untermenü läßt sich bei mir die Navigation zwar öffnen und schließen jedoch nicht auf die hinterlegte HTML-Seite

zugreifen. Es bleibt immer die zuletzt besuchte HTML-Seite ohne Untermenü im Focus. Deshalb schließen sich auch die Untermenüs nicht

selbständig beim Klick auf einen Menüpunkt mit Untermenü (bei Menüs ohne Untermenü ist alles o.k.). Außerdem wird beim Klick auf den untersten

Menüpunkt eine Ebene zurück ausgeblendet, nicht aber die entsprechende HTML-Seite aktiviert.
Da ich noch ziemlicher Anfänger in Sachen JavaScript bin, möchte ich hier um Unterstützung bitten. Wer kann mir einen guten Tip hierfür geben,

damit ich den Fehler an der Navigation der Homepage beheben kann.

Besten Dank für die Unterstützung im voraus

Gruß
Thomas

<html lang="de">
<head>

<script type="text/javascript">

window.onload=menu;
function menu(){
        var l=document.getElementById('menu').getElementsByTagName('ul')

for(var i=0;i<l.length;i++){
                l.item(i).style.display='none';
        }
        l=document.getElementById('menu').childNodes
        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){
                e.onclick=function (){show(this);return false;}

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){
        if(e.parentNode!=document.getElementById('menu')){
                if(!document.getElementById('my_event')){
                        e.id='my_event'
                        e.getElementsByTagName('ul').item(0).style.display=(e.getElementsByTagName('ul').item(0).style.display=='none') ?

'block' : 'none'
                }
        }
        else{
                if(document.getElementById('my_event')){
                        document.getElementById('my_event').id=''
                }
                else        e.getElementsByTagName('ul').item(0).style.display=(e.getElementsByTagName('ul').item(0).style.display=='none') ?

'block' : 'none'
        }

}
</script>

</head>
<body>

<div id="header"></div>

<div id="linkespalte">
<ul id="menu">
  <li><a href="menu1.html">1. Menuitem</a></li>
  <li><a href="menu2.html">2. Menuitem</a>
    <ul>
      <li><a href="sub1.html">1. Submenu</a></li>
      <li><a href="sub2.html">2. Submenu</a></li>
    </ul>
  </li>
  <li><a href="menu3.html">3. Menuitem</a>
    <ul>
      <li><a href="sub3.html">3. Submenu</a>
        <ul>
          <li><a href="subsub1.html">1. Subsubmenu</a></li>
          <li><a href="subsub2.html">2. Subsubmenu</a></li>
        </ul>
      </li>
      <li><a href="sub4.html">4. Submenu</a></li>
    </ul>
  </li>
  <li><a href="menu4.html">4. Menuitem</a></li>
</ul>
</div>

<div id="content"></div>
<div id="rechtespalte"></div>
<div id="footer"></div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 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