Javascriptmenü mit verschachtelten Listen
0 
Felix Riesterer
0
Javascriptmenü mit verschachtelten Listen
Hallo zusammen,
ich habe ein kelines Problem mit einem Javascript Menu das aus ungeordneten Listen besteht. Ich möchte jetzt mittels Javascript festlegen das bei überfahren eines Punktes ein evtl. vorhandenes Untermenue eingeblendet wird.
Das Problem bei meinem Beispiel ist das mein Untermenü immer unter dem nächsten LI liegt und ich es nicht hinbekomme den nächsten Knoten anzusprechen.
Ich denke da ist nur ein kleiner Denkfehler drinnen, mein HTML:
<ul id="nav">
<li><a href="#">Punkt1</a></li>
<li><a href="#">Punkt2</a></li>
<li>
<ul>
<li><a href="#" >Punkt2.1</a></li>
<li>
<ul>
<li><a href="#" >Punkt2.1.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Meine JS Funktion:
activateMenu = function(nav) {
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);
/* lade alle listenpunkte */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* hat der nachfolgende li ein untermenue ? <ul> */
var next = i + 1;
if(lis[next].lastChild.tagName=="UL"){
/* assign the function to the current LI */
lis[i].onmouseover=function() {
/* display the inner menu for next li */
lis[next].firstChild.style.display="block";
}
/* assign the function to the current LI */
lis[i].onmouseout=function() {
/* hide */
lis[next].firstChild.style.display="none";
}
}
}
}
}
Danke für jeden Tipp, Chrisi
-
Liebe Chrisi,
Deine Listen-Struktur im HTML stimmt nicht. Schau Dir doch einmal das entsprechende Kapitel in SELFHTML an: http://de.selfhtml.org/css/layouts/navigationsleisten.htm
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix.
Deine Listen-Struktur im HTML stimmt nicht.
Warum sollte sie nicht? Hier einmal etwas sinnvoller eingerückt:
<ul id="nav"> <li><a href="#">Punkt1</a></li> <li><a href="#">Punkt2</a></li> <li> <ul> <li><a href="#" >Punkt2.1</a></li> <li> <ul> <li><a href="#" >Punkt2.1.1</a></li> </ul> </li> </ul> </li> </ul>Hierbei ist alles in Ordnung.
Einen schönen Sonntag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo,
Deine Listen-Struktur im HTML stimmt nicht.
Warum sollte sie nicht? Hier einmal etwas sinnvoller eingerückt:<ul id="nav">
<li><a href="#">Punkt1</a></li>
<li><a href="#">Punkt2</a></li>
<li>
<ul>
<li><a href="#" >Punkt2.1</a></li>
<li>
<ul>
<li><a href="#" >Punkt2.1.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>> > Hierbei ist alles in Ordnung. Von der HTML-Verschachtelung her schon, aber von der Semantik her doch nicht. Der Punkt2.1 gehört doch wohl zum Punkt2 und nicht in einen eigenen Listenpunkt. Also doch eher so: ~~~html <ul id="nav"> <li><a href="#">Punkt1</a></li> <li><a href="#">Punkt2</a> <ul> <li><a href="#" >Punkt2.1</a> <ul> <li><a href="#" >Punkt2.1.1</a></li> </ul> </li> </ul> </li> </ul>viele Grüße
Axel
-
Lieber Axel,
Von der HTML-Verschachtelung her schon, aber von der Semantik her doch nicht. Der Punkt2.1 gehört doch wohl zum Punkt2 und nicht in einen eigenen Listenpunkt.
dann entspricht sie auch eher dem SELFHTML-Beispiel und sollte von der CSS-Umsetzung (und der Javascript-seitigen Ergänzung für den IE) wie beabsichigt funktionieren.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
-
Hallo,
Meine JS Funktion:
activateMenu = function(nav) {
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);
/* lade alle listenpunkte /
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/ hat der nachfolgende li ein untermenue ? <ul> /
var next = i + 1;
if(lis[next].lastChild.tagName=="UL"){
/ assign the function to the current LI /
lis[i].onmouseover=function() {
/ display the inner menu for next li /
lis[next].firstChild.style.display="block";
}
/ assign the function to the current LI /
lis[i].onmouseout=function() {
/ hide */
lis[next].firstChild.style.display="none";
}
}
}}
}
Aus welchen Quellen ist das zusammenkopiert? Mit .firstChild und .lastChild wirst Du im IE nur dann die richtigen Elemente treffen, wenn Du immer eine bestimmte HTML-Struktur einhältst. Das ist also sehr unflexibel. Besser ist, die Elemente mit getElementsByTagName zu holen. Außerdem würde ich IE-Only-JavaScript besser in einem Conditional Comment aufgehoben finden. Beispiel: ~~~html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <!--[if IE]> <script type="text/javascript"> function activateMenu(nav) { var navroot = document.getElementById(nav); /* lade alle listenpunkte */ var lis=navroot.getElementsByTagName("LI"); for (i=0; i<lis.length; i++) { /* hat der nachfolgende LI ein untermenue? */ if((lis[i].getElementsByTagName("UL")).length) { /* assign the function to the current LI */ lis[i].onmouseover=function() { /* display the inner menu for next li */ this.getElementsByTagName("UL")[0].style.display="block"; } /* assign the function to the current LI */ lis[i].onmouseout=function() { /* hide */ this.getElementsByTagName("UL")[0].style.display="none"; } } } } window.onload = function() {activateMenu("nav");}; </script> <![endif]--> </head> <body> <ul id="nav"> <li><a href="#">Punkt1</a></li> <li><a href="#">Punkt2</a> <ul> <li><a href="#" >Punkt2.1</a> <ul> <li><a href="#" >Punkt2.1.1</a></li> </ul> </li> </ul> </li> <li><a href="#">Punkt3</a> <ul> <li><a href="#" >Punkt3.1</a></li> </ul> </li> <li><a href="#">Punkt4</a></li> </ul> </body> </html>viele Grüße
Axel