nicht angemeldet
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>