Schreibe einen Kommentar

Häufig gestellte Fragen zu CSS: Hierarchische Untermenüs

Wie erstelle ich diese coolen Untermenüs, die erscheinen, wenn ich mit der Maus über einen Button fahre?

Navigationsleisten mit mehreren Menüebenen, die bei Bedarf herausfahren oder aufklappen, sind äußerst beliebt. Sie bieten eine ideale Möglichkeit, eine Menge Links in eine kompakte Navigationsleiste zu packen. Hierfür gibt es mehrere Herangehensweisen.

Zuerst die reine CSS-Lösung. Ein sehr beliebtes Vorgehen für hierarchische Aufklappmenüs heißt »Son of Suckerfish«. (Die Vorgängerversion hieß einfach »Suckerfish«.) Die Details finden Sie unter der Adresse http://www.htmldog.com/articles/suckerfish/.

Eine gute (englische) Anleitung für die Erstellung horizontaler Aufklappmenüs mit mehreren Ebenen finden Sie unter der Adresse www.tanfa.co.uk/css/examples/menu/tutorial-h.asp. Auf der gleichen Website befindet sich auch eine Anleitung für die Erstellung vertikaler Menüs mit aufklappbaren Untermenüs: www.tanfa.co.uk/css/examples/menu/tutorial-v.asp.

Ein Nachteil der reinen CSS-Lösungen besteht darin, dass die Untermenüs sofort wieder verschwinden, sobald sich der Mauszeiger des Benutzers nicht mehr darüber befindet. Sie können entweder darauf vertrauen, dass alle Ihre Benutzer hervorragende Reflexe haben, oder Sie verwenden einen anderen Ansatz: Benutzen Sie CSS, um die Buttons zu gestalten, und JavaScript, um die Funktionen der Untermenüs zu steuern. Sie finden verschiedene JavaScript-gesteuerte dynamische Menüs auf der Website von YADM (Yet Another Dynamic Menu): http://www.onlinetools.org/tools/yadm/.

Ein sehr mächtiges und ständig aktualisiertes, aber nicht kostenloses JavaScript-basiertes Menüsystem heißt »Ultimate Dropdown Menu« (www.udm4.com). Es richtet sich nach den gängigen CSS-Standards und ist dabei auch für Suchmaschinen, Bildschirmlesegeräte und andere Browseralternativen zugänglich. Eine kommerzielle Lizenz kostet pro Website $29,95, für Schulen, Universitäten, Wohltätigkeitsorganisationen und Privatpersonen ist die Benutzung kostenlos.

cssmmgers

Auszug aus dem neuerschienenen CSS Missing Manual von David Sawyer McFarland.



Sag's weiter:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert