Florian Fiegel 23. März 2009

Freies browserkompatibles CSS-Framework für Dropdown-Menüs

Dropdown-Menüs zu erstellen, ist immer wieder ein Spaß, besonders für Anfänger. Außerdem muss in der Regel immer wieder (fast) der gleiche Code erstellt und angepasst werden. Und je nach Anforderung soll das Menü verschieden platziert und mit ebenso verschiedenen Verhaltensweisen ausgestattet werden. Für die Entwicklung der Basis gibt es ein Framework zwecks Arbeitserleichterung.

Es handelt sich um das Free CSS Drop-Down Menu Framework. Dieses Framework bringt alles mit, was es für Dropdown-Menüs braucht, Browserkompatibilität, flexibles Layout, einfache Einbindung in Projekte und validen Code. Außer dem Javascript-Schnippsel für den IE6 (Hier bleibt die Wahl zwischen jQuery und Scriptaculous) wird ausschließlich CSS verwendet.

Horizontales Dropdown-Menü mit Flickr-Theme
Horizontales Dropdown-Menü mit Flickr-Theme

Layout und Styling der Menüs sind konsequent getrennt. Letzteres ist über ein Theme in Form einer unabhängigen CSS-Datei realisiert. So können die Layouts ohne Eingriff wieder verwendet werden und lediglich das Aussehen muss den eigenen Wünschen entsprechend verändert werden. Der Autor spricht von 10 bis 15 Minuten zur Erstellung eines eigenen Themes auf Basis eines bestehenden. Einkalkuliert werden sollte allerdings noch die Zeit für die Orientierung bei der ersten Verwendung.

Dropdown-Menü von Links nach Rechts
Dropdown-Menü von Links nach Rechts

Neben den simplen und den erweiterten Grundthemes stehen bereits 4 Themes mit den Designs von Flickr, NVidia, Adobe und MTV zur Verfügung. Weitere Themes werden gesammelt. Das Framework wird weiterentwickelt und läuft unter der GPL als Open-Source, kann also auch frei weiterentwickelt und weitergegeben werden. ™

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

10 Kommentare

  1. Finde das alles auch sehr interessant, jedoch stolpere ich hier über etwas. Habe die nvidia-Vorlage genommen.

    Ich wollte unter einen Menüpunkt noch 2 Untermenüpunkte realisieren. Innerhalb von Frontpage kein Problem, wenn ich jedoch Browservorschau mache, dann klappt das Teil (Untermenü) weder beim Fox noch beim IE auf. Abgespeichert und rein über die Browser angesteuert ändert auch nichts.

    Warum?

  2. Hallo

    Funktioniert super. Hab da nur ein Problem. Meine Seite ist aus Tabellen aufgebaut. Und sobald das Menu in einer Tabelle ist, funktioniert das Menu nicht mehr richtig.
    Grüsse Flow

  3. Die Vorlagen sind ganz gut. Hab sie in diversen Browsern getestet. Falls es aber noch Personen gibt, die auf den IE 5.5 Rücksicht nehmen, werden bei diesem Script keine Lösung gefunden haben.

    Gruss Miranda

  4. Joh, das is et ;-)). Schon lange nach so einer Lösung gesucht. Endlich mal ein Menü das ohne Probleme auf vielen Plattformen funktioniert und wohl intensiv weiterentwicklet wird.

    Gruss tom

  5. Schaut echt gut aus, danke für den tollen Tipp!

  6. Sehr nett, habe mich erst gestern mit solchen Menü’s beschäftigt, kommt ja sehr gelegen :D

  7. Jetzt muss man sich das nicht mehr aus den Seite direkt rausziehen sondern bekommt es geliefert, sehr schön. Aber so ein Menü zu bauen kann auch sehr stressig sein :)

  8. Yeah, das sieht echt interessant aus! Danke für den Tipp!

  9. Geniales Framework.

    Werde ich mir wohl heute mal genauer ansehen.
    *thumbsup*

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.