CSS & Menüsysteme

erweiterte Menüs (Dropdown etc.)

Neben einfachen Listen (und somit auch Menüsystemen) gibt es auch geschachtelte Listen. Diese können im einfachsten Fall immer sichtbar sein. Beispiel.

Sollen die geschachtelten Unterbereiche nur beim "Überfahren" mit der Maus sichtbar sein, dann spricht man von Dropdown- oder Droplinemenüs. Primär wird mit den Eigenschaften "display: none" (oder left:-999 o.ä.) und "display: block" gearbeitet. Beispiel und bei Eric Meyer. Prinzipiell ist hier zwischen reinen CSS-Lösungen und und Lösungen mit CSS und JavaScript (meist jQuery) zu unterscheiden.

Das nachfolgende Beispiel verwendet das Tutorial von line25 und den obigen Ansatz mit display none bzw. block.

nav ul ul {
	display: none;
}
nav ul li:hover > ul {
		display: block;
}

Angewendet auf die unten dargestellte Navigation wird beim "Überfahren" mit der Maus die vorhandene, geschachtelten und auf unsichtbar gesetzte Liste mit den einzelnen Semesterprojekten sichtbar.

Die weiteren CSS-Deklarationen des Tutorials von line25 gestalten und positionieren den Submenübereich. Weiter unten der Link zur Ergebnisseite.

Mehr

Bei zunehmender Komplexität sind Menügeneratoren hilfreich. Sehr umfassend (von reinen CSS-Menüs bis zu jQuery-Menüs) mit eleganten Anpassungsfähigkeiten: CSS Menu Maker. Neuerdings sind wohl alle Menüs kostenpflichtig, ebenso wie die Dremweaver-Erweiterung.

Sehr interessant ist das CSS-Portal mit dem Menu Generator und CSS3 Menu Generator.

Dropdownmenüs u.a. herunterladen und anpassen (alles ohne JavaScript): Free CSS Dropdown Menu. Lizenzen MIT und GNU auch für den gewerblichen Einsatz.

Sehr umfassend bis hin zur beginnenden Unübersichtlichkeit: CSSPlay von Stu Nicholls.

Dort auch Menu Builder 1 2 älteren Datums, sowie Single Level-, Dropdown-, Dropline- und Flyout-Menüs.

Programm herunterladen und installieren: Easy Menu.

Ergebnis

Der finale Inhalt des Tutorials ist (mit einigen Abstandsanpassungen) in der Ergebnisseite dargestellt. Weiterer visueller Feinschliff ist möglich und sinnvoll.

Weiter

Menü aus einer Dreamweaver-Vorlage heraus zu einem Dropdownmenü entwickeln.