nicht angemeldet
Vertikales JS Menü
Wer kann mir bitte Helfen?
Ich habe ein vertikales JS-Menü, welches im Prinzip auch so funktioniert wie ich möchte. Bei diesem Menü ist ein Fehler den ich nunmehr seit Wochen nicht find, da ich leider immer noch JS Anfänger bin.
Dieses Menü ist so aufgebaut, dass mit Klick auf einen Hauptmenüpunkt die Untermenüs aufgehen und mit einem weiteren Klick die darunterliegenden Untermenüs aufgehen. Mit Klick auf eine höhere Ebene schließen sich die darunterliegenden Menüpunkte, oder bei Klick auf einen anderen Hauptmenüpunkt schließt sich der gesamte Verzeichnisbaum. Soweit funktioniert es auch, der Fehler ist folgender: es kann keine HTML-Datei angesprochen werden sofern Menüs Untermenüs haben, sind keine Untermenüs vorhanden so wird die Seite korrekt angezeigt.
Wo kann hier der Fehler liegen? Ich komme einfach nicht dahinter wo mein Fehler ist.
Es wäre für mich sehr wichtig, weil dieses Menü auf einer Vereinspage eingesetzt werden soll, die am Ende ca. 60 Seiten umfassen wird. Ein Menü ohne JS nur mit CSS aufzubauen bei der Menge an Seiten wäre ein wahnsinniger Aufwand, wenn neue Seiten eingefügt werden sollten.
Vielen Dank schon mal im Voraus für die Unterstützung.
Gruß
Thomas
hier mein Code
<html>
<head>
<title></title>
<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>
<ul id="menu">
<li><a href="menuitem1.html">1. Menuitem</a>
</li>
<li><a href="menuitem2.html">2. Menuitem</a>
<ul>
<li><a href="submenu1.html">1. Submenu</a></li>
<li><a href="submenu2.html">2. Submenu</a></li>
</ul>
</li>
<li><a href="menuitem3.html">3. Menuitem</a>
<ul>
<li><a href="submenu3.html">3. Submenu</a>
<ul>
<li><a href="subsubmenu1.html">1. Subsubmenu</a></li>
<li><a href="subsubmenu2.html">2. Subsubmenu</a></li>
</ul>
</li>
<li><a href="submenu4.html">4. Submenu</a></li>
</ul>
</li>
<li><a href="menuitem4.html">4. Menuitem</a>
</li>
</ul>
</body>
</html>
-
Hi,
dein Problem ist also das wenn man z.B. auf "2. Menuitem" klickt sich die Subnavigation öffnet, aber der Link zu "menuitem2.html" nicht beachtet wird?
Der Grund dafür ist vermutlich
e.onclick=function (){show(this);return false;}
Wenn du
<a href="foo.html" onclick="return false;">bar</a>hast wird der Verlinkung bei aktiviertem Javascript und klick darauf auch nicht gefolgt.Allerdings habe ich ein kleines Verständisproblem.
Wenn ich nun auf "2. Menuitem" klicke und dadurch zur Seite "menuitem2.html" komme, wann habe ich dann die Möglichkeit die Submenüs anzusehen/klicken?Das wäre bei einem "hover-Menü" kein Problem, da ich hier die Überpunkte nicht anklicken müsste.
Zudem glaube ich nicht das ein CSS-Hover-Menü komplizierter oder schlechter zu erweitern wäre als ein Javascript-Hover-Menü.
Ein CSS-Klick-die-Überpunkte-Menü glaub ich wäre gar nicht möglich, daher stellt sich für deine Menüführung die Frage aber überhaupt nicht.~dave
-
Hallo,
erstmals vielen Dank für die Info, aber leider hat es nicht geklappt. Wenn ich diese Anweisung bei a href einfüge, weden die Submenüs nicht mehr geöffnet.
Nun zur Funktionsweise des Menüs um Dein Verständnisproblem auszuräumen.
Dieses Menü ist folgendermaßen angedacht. Wenn z.B. das 2. Menuitem angeklickt wird, soll die hinterlegte Seite menuitem2.html angezeigt werden und gleichzeitig die Submenüs 1. Submenu und 2. Submenu sichtbar sein. Jetzt könnten auch die Submenüs angeklickt werden. Wenn jetzt z.B. das 2. Submenu angeklickt wird die hinterlegte Seite submenu2.html angezeigt. Klickt man nun auf das 1. Menuitem wird hier die hinterlegte Seite angezeigt und zudem auch noch der gesamte Verzeichnisbaum geschlossen und nur noch der Menüpunkt 2. Menuitem darf sichtbar sein.
Das geleich sollte auch mit Submenüs passieren egal in welcher Verschachtelungstiefe, oder bei Klick auf eine Ebene höher sollten die darunter liegenden Submenüs ausgeblendet werden.Ich habe mich gestern vermutlich etwas falsch ausgedrückt mit dem CSS-Menü. Ich meinte natürlich ein CSS-Menü ohne JS. Denn hier wäre in der Tat die Arbeit um ein vielfaches mehr, weil ich mehrere Varianten von Menüs für die verschiedenen Seiten gestalten müsste je nachdem, ob hier ein Submenü ist oder nicht. Unsere HP wird am Ende ca. 60 Seiten haben, wovon 15 Seiten als Hauptmenü dienen und der Rest als Submenüs bis zu 3 Ebenen tiefer dienen soll.
Im Gegensatz dazu habe ich bei einem JS-Menü nur einen Verzeichnisbaum mit allen Ebenen und Seiten darunter und kann ihn leicht mit include einbinden. Der Vorteil ist, dass ich nicht auf jeder Seite diesen Verzeichnisbaum einfügen muss und kann an einer zentralen Stelle ändern für alle Webseiten.Gruß
Thomas
Hi,
dein Problem ist also das wenn man z.B. auf "2. Menuitem" klickt sich die Subnavigation öffnet, aber der Link zu "menuitem2.html" nicht beachtet wird?
Der Grund dafür ist vermutlich
e.onclick=function (){show(this);return false;}
Wenn du
<a href="foo.html" onclick="return false;">bar</a>hast wird der Verlinkung bei aktiviertem Javascript und klick darauf auch nicht gefolgt.Allerdings habe ich ein kleines Verständisproblem.
Wenn ich nun auf "2. Menuitem" klicke und dadurch zur Seite "menuitem2.html" komme, wann habe ich dann die Möglichkeit die Submenüs anzusehen/klicken?Das wäre bei einem "hover-Menü" kein Problem, da ich hier die Überpunkte nicht anklicken müsste.
Zudem glaube ich nicht das ein CSS-Hover-Menü komplizierter oder schlechter zu erweitern wäre als ein Javascript-Hover-Menü.
Ein CSS-Klick-die-Überpunkte-Menü glaub ich wäre gar nicht möglich, daher stellt sich für deine Menüführung die Frage aber überhaupt nicht.~dave
-
Hi,
bitte sinnvoll zitieren, kein TOFU!
Ich habe mich gestern vermutlich etwas falsch ausgedrückt mit dem CSS-Menü. Ich meinte natürlich ein CSS-Menü ohne JS. Denn hier wäre in der Tat die Arbeit um ein vielfaches mehr, weil ich mehrere Varianten von Menüs für die verschiedenen Seiten gestalten müsste je nachdem, ob hier ein Submenü ist oder nicht. Unsere HP wird am Ende ca. 60 Seiten haben, wovon 15 Seiten als Hauptmenü dienen und der Rest als Submenüs bis zu 3 Ebenen tiefer dienen soll.
Wäre ggf. besser für den Nutzer, wenn er überall das gleiche Menü vorfindet ...?
Im Gegensatz dazu habe ich bei einem JS-Menü nur einen Verzeichnisbaum mit allen Ebenen und Seiten darunter und kann ihn leicht mit include einbinden. Der Vorteil ist, dass ich nicht auf jeder Seite diesen Verzeichnisbaum einfügen muss und kann an einer zentralen Stelle ändern für alle Webseiten.
Dafür gibt's bessere Möglichkeiten, die nicht unbenutzbar werden, wenn der Client kein JavaScript unterstützt:
</hilfe/faq.htm#quelltext-auslagern>MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
-
-