Nun gibt's nur noch eines zu korrigieren: Die vertikale Position der Menü-Elemente.
Tatsächlich ist es so, dass jedes dieser Elemente, wann immer es angezeigt wird, immer an der selben Stelle erscheint. Somit bietet es sich an, diese Position beim allerersten Durchgang auszurechnen und zu fixieren, dann eben, wenn wir ohnehin schon die Id und die Eventhandler festlegen.
Wir müssen dazu den Elementen jeweils die CSS-Eigenschaft position: absolute angeben
und natürlich auch einen Wert für top.
Ein wenig erschwerend kommt hinzu, dass in unserem Beispiel-Menü die Menü-Einträge unterschiedlicher Stufen auch verschiedene Höhen haben. Um es zuerst mal einfach zu machen, legen wir ausserhalb der Funktionen eine neue Javascript-Variable an, einen Array:
var hoehe = new Array(0,34,40,24) ;Er enthält drei Höhen: 34 für Menü-Einträge der ersten, 40 für solche der zweiten und 24 für Einträge der dritten Stufe. Das erste Array-Element hat die Nummer 0, und da wir keine Menü-Einträge nullter Stufe haben, ist es eigentlich egal, was für ein Wert als erster vorkommt.
stufe1,
stufe2 und stufe3 abgestimmt.
Nun lässt sich mit ein wenig Nachdenken herausfinden, wie aus der hierarchischen Position eines Eintrags dessen vertikale Position bestimmt werden kann:
Für den Eintrag 3.1.2. wär's also
(3 - 1) * hoehe[1] + (1 - 1) * hoehe[2] + (2 - 1) * hoehe[3]
Wir bauen die entsprechende Berechnung nun auch noch in unsere Funktion zuklappen ein,
wo sie bei der erstmaligen Verarbeitung zum Zug kommt:
...
if(erstmals) {
dieseskind.onmouseover = aufklappen ; // Event-Handler
dieseskind.onmouseout = einklappen ; // installieren
diese_id = "" ; // eine neue Id aufbauen
vpos = 0 ; // und ihre vertikale Position
for(di=1 ; di<9 ; di++) { // Die Id wird aus den
if(di > diesestufe) zaehler[di] = 0 ; // Werten mehrerer Zähler
else { // (einer pro Stufe)
if(di == diesestufe) zaehler[di]++ ; // zusammengesetzt.
diese_id += zaehler[di] + "." ;
vpos += (zaehler[di] - 1) * hoehe[di] ; // vpos aufkumulieren
}
}
dieseskind.id = diese_id ; // Id zuordnen
dieseskind.style.position = "absolute" ; // damit wir positionieren können
dieseskind.style.top = vpos + "px" ; // damit klar ist, wo
}
...