Das war ein ziemlich anspruchsvolles Beispiel, und wir haben noch nicht mal ausgereizt, was noch alles möglich wäre. Muss ja auch nicht sein.
Du hast aber gut sehen können, wie HTML, CSS und JavaScript zusammenwirken. CSS-Eigenschaften sind an HTML-Elemente gebunden, und JavaScript kann verwendet werden, diese Elemente aufzusuchen und einzelne ihrer Eigenschaften zu verändern oder sogar erstmals zu definieren. Du brauchst dazu ein paar Kenntnisse der JavaScript-Sprache und im vorliegenden Fall sind wir hier sogar relativ tief in die Materie eingedrungen. Du brauchst aber auch das Verständnis von HTML und seiner Container-Architektur (ich erinnere an die Sache mit den Kinder-Elementen) und musst über CSS und seine Arbeitsweise Bescheid wissen.
Es braucht also einige Voraussetzungen, um so etwas zu realisieren. Umgekehrt ist es für alle, die HTML, CSS und vielleicht auch etwas JavaScript kennen, eine Möglichkeit, diese Kenntnisse endlich kombiniert nutzen zu können.
Mit diesem Beispiel haben wir gesehen, was alles möglich ist und in welche Richtung es geht.
Du kannst natürlich noch mehr tun. Bei der ersten Vorstellung des Klappmenüs
zeigte z.B. ein kleiner Pfeil an, ob ein Menü noch Untermenus hat. Das haben wir in unserer Lösung
nicht auch noch im Detail auscodiert, können wir aber hier noch nachholen. So ein Pfeil sollte erscheinen,
wenn's noch Untermenus hat. Wir könnten das auch so formulieren: Immer wenn auf einer Menüstufe die Nummer
1 vorkommt, bedeutet das, dass das hierarchisch übergeordnete Menü einen Fortsetzungspfeil erhält. Wenn
wir also die Id 3.2.1 bilden, wissen wir, dass das Element mit der Id 3.2 einen
Pfeil kriegen muss. Den Pfeil liefern wir als Hintergrundbild für das Menü-Element, rechtsbündig, vertikal
zentriert und ohne Wiederholungen.
Hier siehst du die Ergänzungen
im Vorspann:
var das_menu ; var die_class ; var der_pfeil ; var erstmals = true ; var offpend = false ; // Zwei Variablen zum Handling des Ausblendens var pendent = null ; // wenn der Mauspfeil wegbewegt wird var hoehe = new Array(0,34,40,24) ; function klappmenu(mname,gname,forts) { das_menu = mname ; die_class = gname ; der_pfeil = forts ; zuklappen() ; }
und dann im "erstmals"-Bereich:
...
dieseskind.id = diese_id ; // Id zuordnen
dieseskind.style.position = "absolute" ; // damit wir positionieren können
dieseskind.style.top = vpos + "px" ; // damit klar ist, wo
if(diese_id.substr(diese_id.length-2,1) == "1" && diesestufe > 1) {
diese_id = diese_id.substr(0,diese_id.length-1) ; // "3.2.1." --> "3.2.1"
pfeil_id = diese_id.substr(0,diese_id.lastIndexOf('.')) + "." ; // "3.2.1" --> "3.2."
pfeilmenu = document.getElementById(pfeil_id) ; // auf dieses Element zielen
pfeilmenu.style.backgroundImage = "url(" + der_pfeil + ")" ; // und Style-Angaben
pfeilmenu.style.backgroundPosition = "right center" ; // anpassen.
pfeilmenu.style.backgroundRepeat = "no-repeat" ;
}
...
Danach bleibt nur noch, im <body>-Tag bei der onload-Anweisung
auch das Bild noch anzugeben:
<body onload="klappmenu('meinmenu','stufe','expandr.gif')">
... und das war's dann.
Hier siehst du das Resultat.
Weitere Verfeinerungen überlasse ich deiner persönlichen Initiative.