CSS

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

23. März 2009
von

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.

dropdown horizontal foto
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 left2right foto
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. ™

 foto

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.

10 Kommentare zu „Freies browserkompatibles CSS-Framework für Dropdown-Menüs

  1. Martin Holzhauer am 23. März 2009 um 09:04

    Geniales Framework.

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

  2. tom am 23. März 2009 um 09:50

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

  3. David Hellmann am 23. März 2009 um 11:58

    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 :)

  4. IrealiTY am 23. März 2009 um 12:37

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

  5. Pani am 23. März 2009 um 20:10

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

  6. Thomas Mergen am 27. März 2009 um 16:16

    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

  7. [...] Freies browserkompatibles CSS-Framework für Dropdown-Menüs [...]

  8. Miranda am 5. Mai 2009 um 10:21

    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

  9. Flowbey am 31. August 2009 um 19:04

    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

  10. Oli am 1. Dezember 2009 um 14:40

    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?

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!

*