Die Suche hat ein Ende! Hier gibt’s ein wirklich sehr leicht anzupassendes Dropdown-Menü ohne JavaScript. Es basiert auf einer herkömmlichen Liste mit Unterlistenpunkten und kann durch die Veränderung von nur zwei Attributen im Stylesheet in eine horizontale bzw. vertikale Navigation umgewandelt werden.
Dieses Menü besticht, im Gegegnsatz zu vielen anderen, durch seine Einfachheit. Eine normale Liste bildet die Grundlage. Und das besondere daran: Sie kommt ohne zusätzliche Klassen oder IDs aus, ist dadurch dynamisch und kann in jedes CMS, das eine Navigation aus einer Liste generiert, integriert werden.
Die Technik basiert auf einem li:hover (für den IE6 ermöglicht durch die anehangene behavior-Datei) sowie overflow:hidden und overflow:visible-Zuständen. Im IE6 wird die Navi beim drüberfahren um die Höhe der Subnavi gestreckt.
Der Umbau in eine horizontale Menüleiste ist denkbar einfach. Es muss lediglich ein margin-Wert verändert und ein display:inline auf die Listenpunkte gelegt werden. Das habe ich bereits vorbereitet und es kann in den CSS-Dateien eingesehen werden.
Für Verbesserungsvorschläge bin ich immer dankbar und würde mich über einen Kommentar freuen.
Ein Live-Demo des Menüs gibt es hier und hier kann man es downloaden.
Dropdown Menues Downloads: 950
Andreas Battenfeld
(am 28. April 2009 um 11:06)hallo,
kann man das Dropdown-Menü auch mit einfachen Mitteln so gestalten, daß es so aussieht:
01
02
02a
02b
02c
03
also daß die Submenüs unter dem Hauptmenüpunkt und nicht daneben geöffnet werden.
Vielen Dank für die Auskunft.
MfG
Andreas Battenfeld
Freizeitler
(am 28. April 2009 um 19:36)Hallo Andreas!
Wenn du folgende Werte in der Datei “menu_vertikal.css” änderst bzw. hinzufügst, sollte es funktionieren:
ul li:hover {
overflow: visible;
background: #999;
height: auto;
}
ul ul {
margin: 0px;
width: 100px;
}
Viele Grüße,
Henry
Homepage Ben
(am 25. Juni 2009 um 12:21)ahhh super nach sowas hab ich schon ewig gesucht danke!
Markus
(am 11. September 2009 um 16:59)Hallo,
in der Tat suche ich jetzt schon lange ein vertikales Dropdown-Menü, bei dem ich ohne Java-Kenntnisse und umfangreiche Scriptänderungen auskomme. Also downloade und installiere ich Euer plugin in Wordpress 2.8.4 und als ich es aktivieren will, antwortet mir Wordpress mit einer Fehlermeldung: “Das Plugin hat keinen validen Header.” grrrr.
Ich bin verzweifelt! Was muss/kann ich in der header.php ändern/ergänzen?
Vielen Dank für Eure Hilfe
Beste Grüße
Markus
Freizeitler
(am 11. September 2009 um 20:32)Hallo Markus!
Beim Dropdown-Menü handelt es sich lediglich um ein CSS-Snippet und nicht um ein Wordpress Plugin!
Viele Grüße
andreas
(am 18. November 2009 um 17:31)Ganz netter Trick, mit overflow:hidden und so; leider tut das (noch) nicht so richtig bei Menüpunkten mit variabler Breite.
Aber ich teste weiter.
nanne
(am 09. August 2010 um 15:05)hallo,
danach hab ich schon länger gesucht – nun meine frage, funktioniert das horizonatle menü auch mit einem horizontalem dropdown? ich hab ein bisschen probiert, aber ein display: inline hat mir nicht weiter geholfen.
danke für die hilfe,
nanne
Freizeitler
(am 09. August 2010 um 19:24)Du musst eigentlich nur das entsprechende Stylesheet in der HTML-Datei auskommentieren. Es gibt eins für das vertikale und eins für das horizontale jeweils mit Dropdown…
nanne
(am 09. August 2010 um 19:52)hey super, danke für die fixe antwort!
ich hab schon das horizontale dropdown gewählt. was ich meinte war, das was dann gedowndropped wird – also das menü 2. ordnung. da gibt’s sicherlich auch nen fachbegriff für, den kenn ich leider nicht. jedenfalls das geht ja bei deiner horizontalen variante noch vertikal nach unten.
und ich versuche das in einen einen horizontalen balken umzubauen, was mir bis jetzt noch nicht gelungen ist…
vielleicht hast du ja da einen tipp,
grüße!
Freizeitler
(am 09. August 2010 um 21:42)Achso, das meinst Du. Ist als Suckerfish-Menu bekannt. Dafür musst du wie folgt eine feste Breite angeben (Bsp. 600px):
ul ul {margin: 1px 0 0 0px;
width: 600px;
}