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: 751
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.