nicht angemeldet
Vertikales Navigationsmenü
1 0 
Gunnar Bittersmann
0
Vertikales Navigationsmenü
wer kann mir helfen?
Ich habe auf unserer Vereins-Hompage ein vertikales Navigationsmenü (siehe am Ende), welches auch wunderbar funktioniert.
Dieses Menü möchte ich um 1 Untermenüebene erweitern, habe es leider bisher selber nicht hinbekommen.
In meinem Bespiel wär dies dann wie folgt: Menuitem -> Submenu -> SubSubmenu, wobei der aktuelle Code beim Submenü endet.
Wer kann mir bitte helfen beim Erweitern eines solchen Menüs, damit ich dem Wunsch meiner Vereinskollegen entsprechen kann.
Besten Dank im Voraus für die Unterstützung!
Gruß
Thomas
<script type="text/javascript">
<!--
window.onload=show;
function show(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++)
{
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.display='none';
}
}
if (d)
{
d.style.display='block';
}
}
//-->
</script>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:show();"><a href="#">1. Menuitem</a></dt>
<dt onclick="javascript:show('smenu2');"><a href="#" class="smenu">2. Menuitem</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">1. Submenu</a></li>
<li><a href="#" class="last">2. Submenu</a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu3');"><a href="#" class="smenu">3. Menuitem</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">1. Submenu</a></li>
<li><a href="#" class="last">2. Submenu</a></li>
</ul>
</dd>
<dt onclick="javascript:show();"><a href="#">4. Menuitem</a></dt>
</dl>
</body>
-
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-
Hallo Edgar,
erstmals vielen Dank für die Mühe!
Leider hat das Menü nicht so funktioniert wie ich es mir vorgestellt habe.
Entweder habe ich einen kapitalen Fehler gemacht oder es muss noch etwas am JavaScript geändert werden, was ich derzeit nicht weiß. Denn ich bin noch Anfänger in Sachen JavaScript.Nach den Änderungen an meinem Script laut Deinem Vorschlag habe ich jetzt zwar eine weitere Untermenüebene aber kann dort nicht auf die verlinkte HTML-Seite zugreifen (der Focus bleibt immer auf 1. Menuitem oder 4. Menuitem). Wenn ich beim 2. oder 3. Menuitem den Verzeichnisbaum erweitere und eine HTML-Seite anklicke schließt sich immer die unterste Menüebene selbst. Ist das 2. Menuitem bereits erweitert und das 3. Menuitem angeklickt wird bleibt der Verzeichnisbaum unter dem 2. Menuitem erwitert. Wird aber das 1. oder 4. Menuitem angeklick, so schließen sich alle Unterebenen beim 2. oder 3. Menuitem.
Wo kann hier mein Fehler liegenGruß
Thomas-
Re:
Wo kann man sich dieses Menü online ansehen?
Gruß aus Berlin!
eddi
-
-
-
@@ThomasG:
nuqneH
Ich habe auf unserer Vereins-Hompage ein vertikales Navigationsmenü (siehe am Ende), welches auch wunderbar funktioniert.
Was heißt „wunderbar funktioniert“? An Nutzer ohne JavaScript hast du gedacht?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Hallo Gunnar,
Ich habe auf unserer Vereins-Hompage ein vertikales Navigationsmenü (siehe am Ende), welches auch wunderbar funktioniert.
An Nutzer ohne JavaScript hast du gedacht?
ja, hat er; ließ den Quellcode!
Gruß aus Berlin!
eddi-
@@Edgar Ehritt:
nuqneH
An Nutzer ohne JavaScript hast du gedacht?
ja, hat er; ließ den Quellcode!Gib mir bitte deine Glaskugel! Ich kann sein Stylesheet nicht finden.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Re:
...JavaScript...
Ich kann sein Stylesheet nicht finden.Findest Du Deine Aussagen nicht reichlich widersprüchlich?
Gruß aus Berlin!
eddi-
@@Edgar Ehritt:
nuqneH
...JavaScript...
Ich kann sein Stylesheet nicht finden.Findest Du Deine Aussagen nicht reichlich widersprüchlich?
Nein.
Meist werden bei JavaScript-Pull-down-Menüs die nicht ausgeklappten Menüpunkte per Stylesheet ausgeblendet und dann per JavaScript angezeigt.
_Möglich_, dass Thomas dran gedacht hat, die Menüpunkte nur dann auszublenden, wenn JavaScript aktiviert ist. Eben dies lässt sich nur durch einen Blick ins Stylesheet klären.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Re:
...JavaScript...
Ich kann sein Stylesheet nicht finden.Findest Du Deine Aussagen nicht reichlich widersprüchlich?
Nein.
Meist werden bei JavaScript-Pull-down-Menüs die nicht ausgeklappten Menüpunkte per Stylesheet ausgeblendet und dann per JavaScript angezeigt. _Möglich_, dass Thomas dran gedacht hat, die Menüpunkte nur dann auszublenden, wenn JavaScript aktiviert ist. Eben dies lässt sich nur durch einen Blick ins Stylesheet klären.
Nochmals: Lies den Quellcode! Verwende Deine Aufmerksamkeit - statt meiner Glaskugel - dabei auf das Ausblenden beim onload-Event durch Javascript!
Gruß aus Berlin!
eddi
-
-
-
-
-