Ein Sidebar-Menü mit purem CSS erstellen

Programmiere ein Sidebar-Menü für deine Webseite

Navigationen und Menüs gibt es in allen Formen und Farben. Sie sollen sowohl den Benutzer als auch Suchmaschinen zu den wichtigsten Bereichen der Webseite führen. In diesem Beitrag erfährst du, wie du ein aufklappbares Sidebar-Menü in purem CSS erstellst.

Vorletzte Woche habe ich bei einer Codepen Challenge teilgenommen, in der es Ziel war, ein Menü zu formatieren. Für meine Kunden hatte ich in den letzten Jahren Menüs in allen Formen und Farben programmiert.

Eine meiner Lieblings-Navigationen ist das Sidebar-Menü.

Mit einer kleinen Anleitung kannst du dieses Menü in etwa einer halben Stunde auf deiner Webseite eingebaut haben.

Voraussetzung ist, dass du bereits weißt wie du CSS-Formatierungen und neue HTML-Strukturen auf deiner Webseite einfügen kannst. Du wirst zudem ein FTP-Programm benötigen, um die verschiedenen Anpassungen auf deiner Webseite hochzuladen.

Es ist nicht wichtig, ob du die CSS-Anpassungen in eine vorhandene oder in eine separate CSS-Datei einbindest. Achte bei der Erstellung neuer CSS-Regeln nur darauf, dass keine vorhandene Regeln deine Neuen überschreiben.

Schnapp dir deinen Quellcode-Editor und lege gleich los!

Das HTML des Sidebar-Menüs

Fangen wir mit der HTML-Grundstruktur der Navigation an.

Unser Menü wird wie üblich aus einer Liste bestehen. Das Element <ul> bietet sich hervorragend für Menüs an.

Eine Liste besteht aber nicht nur aus dem <ul>-Tag. Sie besteht auch den einzelnen Listen-Elemente <li>. In diese Elemente platzieren wir die Verlinkungen, die als Navigations-Punkte dienen sollen.

Seit HTML5 gibt es das <nav>-Tag. Mit diesem Element zeigst du dem Browser und der Suchmaschine, wo die Navigation gesetzt ist. Dieses Element verwenden wir als umschließendes Element der Navigation.

Diese HTML-Struktur dient als Grundlage für das Menü:

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li>
			<a href="#">Clients</a>
			<ul>
				<li>
					<a href="#">Burger King</a>
				</li>
				<li>
					<a href="#">Southwest Airlines</a>
				</li>
				<li>
					<a href="#">Levi Strauss</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Services</a>
			<ul>
				<li>
					<a href="#">Print Design</a>
				</li>
				<li>
					<a href="#">Web Design</a>
				</li>
				<li>
					<a href="#">App Development</a>
				</li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Natürlich musst du die einzelnen Navigations-Punkte noch an deine Webseiten-Struktur anpassen. Wenn du ein CMS verwendest musst du die einzelnen Elemente wahrscheinlich mit einem PHP-Skript platzieren.

Die Formatierung des Sidebar-Menüs

Bei der Formatierung muss auf einiges geachtet werden. Weil es das Herzstück des Sidebar-Menüs wird, habe ich dieses Thema in ein paar Untergruppen unterteilt.

Den kompletten Code des Sidebar-Menüs findest du im Codepen-Fenster ganz unten im Beitrag ohne Kommentare.

Globale CSS-Klassen für das Sidebar-Menü

Mit den ersten CSS-Regeln definieren wir ein paar wichtige Grund-Formatierungen für unser Menü. Die Listen-Punkte des <ul>-Tags sollen verschwinden und die <a>-Tags sollen eine weiße Schrift, einen blauen Hintergrund beim Hover und etwas Abstand nach Innen bekommen.

Zudem entfernen wir die Abstände der <ul>-Tags und geben den <li>-Elementen die Eigenschaft "position: relative". Mehr dazu später.

/* Global Styles - Teil 1 */
nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
nav ul li {
	position: relative;
}

Für den Hover verwende ich einen RGBA-Wert. RGBA steht für "Red Green Blue Alpha". Alpha ist die Transparenz des Farbwerts und geht von 0 bis 1. 50% Transparenz wären also "0.5". Vergiss auch nicht, dass du hier kein Komma sondern einen Punkt setzen musst.

/* Global Styles - Teil 2 */
nav ul li:hover {
	background-color: rgba( 0, 150, 255, 1.0 );
}

Die Links kannst du gerne nach belieben gestalten. Da meine Navigation einen schwarzen Hintergrund erhält werden die Link-Texte in Weiß formatiert.

/* Global Styles - Teil 3 */
nav ul a {
	color: #ffffff;
	text-decoration: none;
	padding-left: 25px;
	display: block;
	padding: 10px 5px;
	padding-left: 30px;
}

Die Eigenschaft "content" in Verbindung mit FontAwesome kann einen Pfeil vor jeden einzelnen Menüpunkt platzieren. Diese Regel kannst du auch komplett entfernen, damit der Pfeil nicht dargestellt wird. Denke aber daran, dass du die Eigenschaft "padding-left" in der Regel "nav ul a" angleichst oder entfernst.

/* Global Styles - Teil 4 */
nav ul a:after {
	content: "\f054";
	font-family: "FontAwesome";
	display: block;
	position: absolute;
	left: 15px;
	top: 13px;
	font-size: 12px;
}

Der Stil des nav-Wrappers

Kümmern wir uns nun um das Wrapper-Element <nav>.

Damit die Navigation eine Sidebar-Navigation wird, benötigen wir ein paar wichtige Eigenschaften.

Die wichtigste Eigenschaft ist das "position: fixed". Damit definieren wir, dass das Element "nav" beim Scrollen nicht mit läuft. Es bleibt immer an einer definierten Stelle stehen. Diese Platzierung können wir durch die Eigenschaften "left", "right", "top" und "bottom" bestimmen.

Zudem erhält die Navigation eine "transition", also einen Übergang für eine bestimmte Eigenschaft. In diesem Fall "left".

Sobald die Maus über die Navigation platziert wird (hover), soll der Wert der Eigenschaft "left" von "-150px" auf "0px" gesetzt werden. Dadurch wird die Navigation vom nicht-sichtbaren in den sichtbaren Bereich geschoben.

Du kannst die Breite (width) der Navigation nach belieben anpassen. Ändere den Wert (left), wenn du die Breite änderst. Der Wert der left-Eigenschaft muss mit der Breite übereinstimmen und in den Negativen Bereich gebracht werden: Breite * -1.

Wenn sich die Maus vom Sidebar-Menü wegbewegt wartet die Navigation eine halbe Sekunde und verschwindet danach. Wenn du den Wert "0.5s" in der Eigenschaft "transition" änderst, kannst du die Wartezeit beeinflussen. Zum Beispiel auf 0 Sekunden ("0s") oder auf 2,5 Sekunden ("2.5s") stellen.

/* Main-Wrapper - Teil 1 */
nav {
	position: fixed;
	width: 150px; /* Diese Breite kannst du ändern */
	left: -150px; /* Vergiss nicht diesen Wert anzupassen, wenn du die Breite änderst! */
	top: 0;
	bottom: 0;
	background-color: rgba( 0, 0, 0, .9 );
	padding: 15px 0;
	transition: left 1s ease-in 0.5s; /* Das ist der Verlauf zwischen left: -150px und left: 0 (Im Code-Block "Main-Wrapper - Teil 3" erfährst du mehr dazu) */
}

Diese Regel fügt einen Hover-Punkt an die Ecke der Navigation ein. Du kannst den Content gerne nach belieben ändern, oder ein background-image platzieren. Ich habe mich für FontAwesome entschieden, da diese Bibliothek bereits auf meiner Webseite enthalten ist und sehr schöne Icons liefert.

/* Main-Wrapper - Teil 2 */
nav:after {
	content: "\f0c9";
	font-family: "FontAwesome";
	font-weight: 400;
	font-style: normal;
	text-decoration: inherit;
	color: #ffffff;
	position: absolute;
	left: 100%;
	top: 0;
	padding: 15px;
	background-color: rgba( 0, 0, 0, .9 );
	border-bottom-right-radius: 5px;
	cursor: pointer;
}

Sobald der Besucher in irgendeiner Weise seine Maus über das Element <nav> bewegt, erscheint die Navigation. Dies geschieht durch die Eigenschaft "left: 0". Zudem überschreiben wir die "transition" beim Hover. Dadurch wird das Menü zwar sofort aufklappt, lässt sich aber beim einklappen ein wenig Zeit.

Das Hamburger-Menü-Icon wird beim Hover zu einem "X" umgeschrieben, um zu kennzeichnen dass man sich gerade in der Navigation befindet. Die Regel "nav:hover:after" kannst du auch ganz einfach löschen, um dieses Verhalten zu entfernen.

/* Main-Wrapper - Teil 3 */
nav:hover {
	left: 0;
	transition: left 1s ease-in 0s;
}
nav:hover:after {
	content: "\f00d";
}

Ich verwende noch gerne ein wenig Abstand nach oben, damit das Submenü des ersten Punkts nicht über den Navigations-Trigger "nav:after" dargestellt wird. Die Überlagerung würde nicht sehr gut aussehen. Passe den margin-top nach belieben an. Achte aber darauf, dass sich der erste Menüpunkt unterhalb des Navigation-Triggers befindet.

/* Main-Wrapper - Teil 4 */
/* First-Level Navigation */
nav > ul {
	margin-top: 32px;
}

Die unteren Ebenen im Sidebar-Menü

Ein Menü besteht in der Regel nicht nur aus den Hauptmenü-Punkten, sondern auch aus den Unterpunkten. Zum Beispiel hast du einen Hauptmenü-Punkt "Schuhe" und die Untermenü-Punkte "Herren-Schuhe", "Damen-Schuhe", usw.

Die nächsten CSS-Regel beschäftigen sich genau mit diesen Formatierungen. Die Untermenü-Punkte sollen erst dann erscheinen, wenn der Besucher seine Maus über einen Übermenü-Punkt lenkt. Das können wir wieder mit der Pseudo-Klasse ":hover" abfragen.

Der Unterpunkt des Sidebar-Menüs soll in den nicht-sichtbaren Bereich verschwinden und erst dann dargestellt werden, wenn der Besucher mit seiner Maus über einen Über-Punkt fährt.

Ich habe mich dazu entschieden die Submenüs von unten nach oben fahren zu lassen. Dazu muss der Standardwert "top" auf einen hohen Bereich gesetzt werden, der außerhalb des Bildschirms liegt. Für HD-Monitore sind das mindestens 1080 Pixel in der Höhe.

/* Multi-Level Navigation - Teil 1 */
nav ul li > ul {
	position: absolute;
	background-color: rgba( 0, 0, 0, .9 );
	width: 100%;
	top: 1999px;
	left: 100%;
	transition: top .5s;
}

Die Untermenü-Punkte sollen mindestens 120px besitzen. Dieser Wert errechnet sich aus der Breite des nav-Elements minus dem Innenabstand (padding), der links und rechts jeweils 15px beträgt. Achte also darauf, wenn du den Innenabstand der Menüpunkte, oder die Breite des Sidebar-Menüs anpasst.

/* Multi-Level Navigation - Teil 2 */
nav ul li > ul li {
	min-width: 120px;
}

Sobald der Besucher seine Maus über einen der Über- oder Unter-Punkte bewegt, soll das Menü sichtbar werden. In meiner Sidebar habe ich mich dafür entschieden die Unterpunkte von Unten nach Oben einfahren zu lassen. Das kann durch die Eigenschaft "top: 0%" oder nur "top: 0" eingerichtet werden.

/* Multi-Level Navigation - Teil 3 */
nav ul li:hover > ul,
nav ul li > ul:hover {
	top: 0%;
}

Der komplette Code des Sidebar-Menüs

Wenn du den Beitrag bis hierher verfolgt hast, wirst du ein Sidebar-Menü mit Unterpunkten erstellt haben, dass beim Hover geöffnet werden kann.

Ich habe den Code noch einmal in Codepen vorbereitet, damit du ihn dir komplett entnehmen kannst. Bitte berücksichtige, dass ich an diesem Pen hin und wieder ein paar Kleinigkeiten ändern kann. Der Stamm-Code bleibt aber derselbe.

See the Pen Sidebar Navigation w/ pure CSS by Codepalm (@Codepalm) on CodePen.

Mit diesem Beitrag wollte ich dir nicht nur zeigen, wie man ein Sidebar-Menü aufbauen kann. Sondern auch dass du für einige Animationen gar kein JavaScript oder jQuery benötigst.

Im Gegensatz zu CSS benötigt JavaScript und jQuery viel mehr Leistung des Besucher-Rechners. Dadurch können Animationen ruckeln und sehen dadurch unsauber aus.

Wenn du aber Animationen mit CSS erstellst und auf die Verfügbarkeit der einzelnen CSS-Eigenschaften in verschiedenen Browsern Acht gibst, erhältst du reibungslose Animationen.

Bitte beachte zudem, dass dieses Menü nicht für Smartphones geeignet ist.

Hat dir der Beitrag gefallen? Schreibe mir in den Kommentaren deine Erfahrungen mit dem Sidebar-Menü.