Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Florian Fiegel 23. März 2009

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

Dropdown-Menüs zu erstel­len, ist immer wie­der ein Spaß, beson­ders für Anfänger. Außerdem muss in der Regel immer wie­der (fast) der glei­che Code erstellt und ange­passt wer­den. Und je nach Anforderung soll das Menü ver­schie­den plat­ziert und mit eben­so ver­schie­de­nen Verhaltensweisen aus­ge­stat­tet wer­den. Für die Entwicklung der Basis gibt es ein Framework zwecks Arbeitserleichterung.

Es han­delt sich um das Free CSS Drop-Down Menu Framework. Dieses Framework bringt alles mit, was es für Dropdown-Menüs braucht, Browserkompatibilität, fle­xi­bles Layout, ein­fa­che Einbindung in Projekte und vali­den Code. Außer dem Javascript-Schnippsel für den IE6 (Hier bleibt die Wahl zwi­schen jQuery und Scriptaculous) wird aus­schließ­lich CSS ver­wen­det.

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

Layout und Styling der Menüs sind kon­se­quent getrennt. Letzteres ist über ein Theme in Form einer unab­hän­gi­gen CSS-Datei rea­li­siert. So kön­nen die Layouts ohne Eingriff wie­der ver­wen­det wer­den und ledig­lich das Aussehen muss den eige­nen Wünschen ent­spre­chend ver­än­dert wer­den. Der Autor spricht von 10 bis 15 Minuten zur Erstellung eines eige­nen Themes auf Basis eines bestehen­den. Einkalkuliert wer­den soll­te aller­dings noch die Zeit für die Orientierung bei der ers­ten Verwendung.

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

Neben den simp­len und den erwei­ter­ten Grundthemes ste­hen bereits 4 Themes mit den Designs von Flickr, NVidia, Adobe und MTV zur Verfügung. Weitere Themes wer­den gesam­melt. Das Framework wird wei­ter­ent­wi­ckelt und läuft unter der GPL als Open-Source, kann also auch frei wei­ter­ent­wi­ckelt und wei­ter­ge­ge­ben wer­den. (tm)

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.

9 Kommentare

  1. Finde das alles auch sehr inter­es­sant, jedoch stol­pe­re ich hier über etwas. Habe die nvi­dia-Vorlage genom­men.

    Ich woll­te unter einen Menüpunkt noch 2 Untermenüpunkte rea­li­sie­ren. 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 ange­steu­ert ändert auch nichts.

    Warum?

  2. Hallo

    Funktioniert super. Hab da nur ein Problem. Meine Seite ist aus Tabellen auf­ge­baut. Und sobald das Menu in einer Tabelle ist, funk­tio­niert das Menu nicht mehr rich­tig.
    Grüsse Flow

  3. Die Vorlagen sind ganz gut. Hab sie in diver­sen Browsern getes­tet. Falls es aber noch Personen gibt, die auf den IE 5.5 Rücksicht neh­men, wer­den bei die­sem Script kei­ne Lösung gefun­den haben.

    Gruss Miranda

  4. Joh, das is et ;-)). Schon lan­ge nach so einer Lösung gesucht. Endlich mal ein Menü das ohne Probleme auf vie­len Plattformen funk­tio­niert und wohl inten­siv wei­ter­ent­wick­let wird.

    Gruss tom

  5. Schaut echt gut aus, dan­ke für den tol­len Tipp!

  6. Sehr nett, habe mich erst ges­tern mit sol­chen Menü’s beschäf­tigt, kommt ja sehr gele­gen :D

  7. Jetzt muss man sich das nicht mehr aus den Seite direkt raus­zie­hen son­dern bekommt es gelie­fert, sehr schön. Aber so ein Menü zu bau­en kann auch sehr stres­sig sein :)

  8. Yeah, das sieht echt inter­es­sant aus! Danke für den Tipp!

  9. Geniales Framework.

    Werde ich mir wohl heu­te mal genau­er anse­hen.
    *thumb­sup*

Schreibe einen Kommentar

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