Was macht dieses Javascript?

[ezzemm]

Hallo zusammen!

Ich habe von einem Kollegen die Wartung einer internen HP übernommen. Er hat für die Seite eine Navigation gebastelt wo, wenn man mit der Maus über einen Menüpunkt fährt, die Unterpunkte nach unten heraus angezeigt werden.
Das Ganze funktioniert via CSS und "display:none".
Im IE7 und FF funktioniert das nicht nur mit <a> sondern auch mit <ul> und <div>; im IE6 aber nur mit <a> (siehe hier: http://aktuell.de.selfhtml.org/artikel/css/infobox/#beispiel3)

Er hat daher die Navigation in einer verschachtelten Liste gelöst samt span+display:none und damit das auch im IE6 funktioniert noch ein Javascript eingebaut:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;


Nun meine Frage: Was macht dieses Javascipt genau?
Ich würde nämlich gerne die Seite umstricken, aber ohne genaues Verständnis der Funktion komme ich leider nicht sehr weit :frown:

[Kinman]

Es geht alle Elemente die in einem Element mit der ID "nav" durch und vergleicht den namen des Elements (Name Attribute). Ist dieser "LI", dann wird die CSS-Klasse noch um die Klasse "over" erweitert.
Wenn die Maus wieder vom Element entfernt ist, dann wird dies wieder rückgängig gemacht.

mfg Kinman

[ezzemm]

Vielen Dank für die Info, ich glaube das hilft mir sehr weiter. Bitte überprüfe meinen Gedankengang, damit ich das richtig verstanden habe :wink:

Wenn Maus nicht über dem Objekt:
<div id=nav>
<ul>
<li></li>
<li></li>
</ul>
</div>


Wenn Maus über dem Objekt:
<div id=nav>
<ul>
<li class="over"></li>
<li class="over"></li>
</ul>
</div>

[Kinman]

könnte sein, aber ganz sicher bin ich mir nicht

möglich das nicht <li></li> sein muss, sodern dass <element name="LI"></element> sein muss.

Das mit der Klasse müsste aber stimmen.

mfg Kinman

[DanMan]

könnte sein, aber ganz sicher bin ich mir nicht

möglich das nicht <li></li> sein muss, sodern dass <element name="LI"></element> sein muss.
Ne, ersteres: http://developer.mozilla.org/en/docs/DOM:element.nodeName

Übrigens eine mMn sehr hilfreiche Seite, wenn man JS programmiert.

[dav133]

Das ist der gute, alte Suckerfish und zwar 1:1 (da hat sich dein Kumpel wohl mit fremden Federn geschmückt): http://www.alistapart.com/articles/dropdowns/

Wie schon erwähnt, gleicht das Javascript die mangelhafte CSS Interpretation des IE 6 aus.

lg