Dropdown Menü mit nur CSS mit vielen Beispielen

Beitrag am erstellt von

In diesen Blogbeitrag geht es um Dropdown Navigations Menues, die nur mit CSS (pure CSS) und ohne Javascript funktionieren. Wie der Name Dropdown Menue (Nach unnten kommendes Menu) schon beschreibt, erscheint ein zunaehst nicth sichbares Obejkt in diesem Fall ein Unter Menues mit einem Hover effekt zum vorscheinen..

Wie funktionert der standart Code?

Mehr oder weniger kurz erklärt:

Die ul (subnavi) ist in einer li (Hauptpunkt) und wird mit position absolut zum Schweben gebracht. [Das bedeutet, dass die ul (subnavi) sich nach einem Eltern-Element ausrichtet, welches postion relativ als Wert aufweist. Wenn es kein Elternelement gibt, welches position relativ besitzt, richtet sich das Element nach den body aus. Außer dem haben Elemente die, die Eigenschaft position absolut aufweisen, keine solide box, dass heißt, andere Elemente können dieses Element nicht beeinflussen. Nur durch Top,Bottom,Left,Right, transform usw. kann dieses Element von der position beeinflusst werden. Mehr zu position absolut finden Sie auf dieser Seite] Zurück zu unserem Beispiel. Da wir hinbekommen wollen, das sich die ul (subnavi) sich nach der li (Hauptkategorie) ausrichten soll, geben wir der li (Hauptkategorie) ein position realtiv, damit sich die ul (subnavi) und die li (Hauptkategorie) nicht überlappen, geben wir der ul(subnavi) noch den Wert top von ungefähr 1.5em. [diese kann variieren, einfach ausprobieren.]

Außerdem benötigt die ul (subnavi) eine transition Funktion, damit diese "smoooth" ausgefahren wird. Dieser sieht in meinem Beispiel, folgendermaßen aus. transition: all 1s ease;. Um mehr über transition zu erfahren, lesen Sie mein Blog-Beitrag über Transition.

Um die ul (subnavi) im normal zustand, also wenn kein hover effekt ausgeführt wird, unsichtbar zu machen, benötigt die ul (subnavi) die Werte, max-height: 0;, height : 0: und overflow: hidden:. Mit height: 0: wird die Höhe auf 0 gesetzt , max-height wird für den hover Effekt mit transitions benötigt und overflow: hidden: versteckt den Text der angezeigt wird, der selbst wenn ein element height:0; besitzt angezeigt wrid.

Damit jezt beim Hovern die ul (subnavi) sichtbar und ausgefahren wird, muss die height auf auto gesetzt werden und die max-height auf ein Wert, der bisschen höher ist als die längste ul auf der Seite. Theoretisch wäre der Wert 9999px auch möglich, das Problem dabei wäre, das es dauern kann bis die ul (subnavi) sich schließt Da er die pixel von 9999 bis 0 transition muss. Heißt der Sichtbare Teil von ca. 300px ist so ein Bruchteil von 9999px, das dieser nur kurz animiert wird. Einfach selber ausprobierne und angucken. Eine alternative welche nicht immer angepasst werden muss ist diese. Man sezt die Funktion max-height auf 100vh (100 Viewport Height, bedeutet die 100% Höhe von dem Device also vom Gerät). Somit ist die Verzögerung die bei 9999px sehr lange ist nur gering. Außerdem muss man sich keine Sorgen machen, dass keine Navigation zu lang ist und diese wegen dem zu niedrigen max-height angezeigt wird.

So am Ende nur noch schön gestalten und fertig ist der Dropdown Menü mit nur CSS.