Schnelles Drop-Down-Menü mit CSS3
Kommentare

CSS3 steht bei vielen Web Developern hoch im Kurs, wenn es um das moderne Styling von Inhalten auf Webseiten geht. Das die Version 3 der Cascading Style Sheets mehr als nur schicke Buttons und Bullets

CSS3 steht bei vielen Web Developern hoch im Kurs, wenn es um das moderne Styling von Inhalten auf Webseiten geht. Das die Version 3 der Cascading Style Sheets mehr als nur schicke Buttons und Bullets verspricht, darüber hatten wir ja schon berichtet. Und auch wenn es nach und nach neue Tools gibt, die den geneigten Webdesigner beim Styling unterstützen, muss es ja nicht bedeuten, dass man nicht auch ohne besondere Werkzeuge schnelle und einfache Lösungen erzielen kann.

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.

Abb. 1: Flexibles Drop-Down-Menü, mit CSS3 realisiert

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.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -