Eine solche schnelle (und gleichzeitig auch sehr praktische) Idee stellt Guillaume Marty in seinem aktuellen Tutorial How to Build a Kick-Butt CSS3 Mega Drop-Down Menu vor.
Sein auf rund 30 Minuten angesetztes Tutorial geht in 6 ausführlich beschriebenen Schritten auf die Umsetzung und Gestaltung eines nur per CSS3 realisierten Drop-Down-Menüs ein.
Zunächst wird eine Navigation aufgebaut, im wesentlichen eine Unordered List, der Schritt für Schritt einzelne CSS-Effekte wie Box-Schatten und natürlich runde Ecken hinzugefügt werden. Anschließend erweitert Guillaume das ganze um einen Drop-Down-Effekt auf Basis von DIV-Containern, die dann ebenfalls um Effekte, wie zum Beispiel einem kleinen Farbverlauf, ergänzt werden.
Im Anschluss geht es in Guillaumes Tutorial an die Spaltendarstellung, die sich prinzipiell am 960 grid system orientiert. Steht das Grundgerüst, geht es im Tutorial weiter mit dem Styling der Listen, Bilder und Boxen. Und weil wir ihn noch immer nicht überlebt haben, spendiert uns Guillaume am Ende auch noch einen Patch für den Einsatz des Drop-Down-Menüs im Internet Explorer 6.
Hat beim Nachbasteln dann alles geklappt, sollte das Ergebnis grob mit der zur Verfügung gestellten Demo übereinstimmen. Natürlich lässt sich so ein Drop-Down-Menü auch ohne CSS3 realisieren – für runden Ecken, Textschatten und Farbverläufe wird man dann allerdings etwas tiefer in die Trickkiste greifen müssen.
Meinungen zu diesem Beitrag