Neue Navigation, Nachtrag

Das neue Menü ist jetzt einen Tag am Laufen gewesen, nur hat sich bei der Benutzung herausgestellt, dass das mit reinem CSS doch nicht besonders praktisch ist. Stellen wir uns diesen Baum vor:

Würde ich nun mit der Maus über den „Test 1“-Link fahren, klappt der Baum wie gewünscht aus. Ich könnte auch Unter-Items (1.*) anwählen und hätte keine Probleme. Würde ich aber unter „1.4“ fahren, so würde die Klasse „:hover“ des „Test 1“-Knotens nicht mehr aktiv sein und der Baum zusammenklappen; leider klappen damit 4 Items auf einmal ein und meine Maus wäre sofort außerhalb des Baumes.

Wenn ich nur zwei Level habe, so ist das kein Problem; bei dreien aber könnte ich bestimmte Menüpunkte nicht mehr erreichen. Außerdem kann der Internet Explorer 6 damit nichts anfangen.

Ich habe mich daher entschieden, DHTML zu verwenden. Ein unter FireFox und Internet Explorer laufendes JavaScript sieht dann so aus:

Natürlich kann man aus dem Ereignis onmouseover in Zeile 10 auch ein onclick-Ereignis machen, dann klappt der Baum erst beim Klicken auf. Eine Anmerkung zur Parameterübergabe der Funktion openTree(): Weise ich per JavaScript einem Element eine Funktion für ein Ereignis zu, so steht innerhalb der Funktion die Pseudo-Klasse this immer als das aufrufende Element zur Verfügung; ich brauche also nicht, wie von HTML her gewohnt, element.ereignis = „funktion(this)“ zu schreiben.

Sicherstellen, dass er aufgeklappt bleibt, wenn die Seite z.B. in einem Unterpunkt neu geladen wird, der User also auf den Unterpunkt geklickt hat, kann man es aber wieder mit CSS:

Ich habe die display-Property der img-Tags noch so gesetzt, dass ein Baum, der gerade durch Klick auf ein Kind-Element offen bleiben soll, auch nicht mehr geschlossen werden kann; sonst wäre ja der Bezugspunkt unsichtbar.

Ein Wort noch zu deaktiviertem JavaScript: Sollte kein JS verfügbar sein, so erhält der Benutzer keinen Hinweis auf Kindsknoten. Sie werden zwar nach dem Neu-Laden wegen CSS aufgeklappt dargestellt, aber eben nicht in Echtzeit.

Eventuell wäre es deswegen sinnvoll, in einem nächsten WordPress-Release eine CSS-Klasse „page-item-haschildren“ zu den „page-items“ und „cat-items“ mit auszugeben.

Bislang keine Kommentare vorhanden.

Einen Kommentar hinterlassen