responsive Navigation mit Burgermenü

Datum
12.04.2022

Mit diesem Tutorial lernst du, wie du mit HTML/CSS eine responsive Navigation baust. Zum ein- und ausklappen der mobilen Navigation hast du ein Burger-Icon.

Demo

einfache Navigation bauen

Ein nav Element anlegen und eine Liste eintragen

simple navigation desktop

HTML Code

<nav>
	<ul>
		<li><a href="https://wikipedia.org">Link 1</a></li>
		<li><a href="https://wikipedia.org">Link 2</a></li>
		<li><a href="https://wikipedia.org">Link 3</a></li>
		<li><a href="https://wikipedia.org">Link 4</a></li>
		<li><a href="https://wikipedia.org">Link 5</a></li>
	</ul>
</nav>

CSS Code

* {
	margin: 0;
	padding: 0;
}
nav {
	width: 100%;
	background-color: white;
}
nav ul{
	list-style: none;
	float: left;
	width: 100%;
}
nav ul li{
	float: left;
	padding: 5px 30px;
	text-align: center;
}

responsive Navigation Design anpassen

Damit auf dem Handy die Navigation gut klickbar ist, machen wir die Einträge auf volle Breite und etwas höher. Des Weiteren entfernen wir die Abstände links und rechts, da sonst die Navigation breiter als der Bildschirm ist.

simple navigation mobile

@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}	
}

Burger-Icon einbauen

burger menu mit html und css

Jetzt wollen wir noch die Navigation ein- und ausklappbar machen. Dafür benötigen wir ein Bürger-Icon. Ich baue dies selber mit HTML/CSS.

HTML

<div class="burgericon">
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

.burgericon {
	width: 30px;
	height: 30px;
	display: none;
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: black;
}

Burgermenü nur mobile anzeigen

@media (max-width: 600px) {
	.burgericon {
		display: block;
	}
}

Burgermenü interaktiv gestalten

interaktives menu mit checkbox

Damit die Seite auch ohne JavaScript funktioniert, habe ich mich für eine unsichtbare Checkbox entschieden. Das Bürger-Icon muss noch mit einem Label umfasst werden.

<input type="checkbox" id="navigation">
<label for="navigation" title="Navigation öffnen">
	<div class="burgericon">
		<div></div>
		<div></div>
		<div></div>
	</div>
</label>

Navigation mobile ausbleneden

Wenn man auf die Seite kommt, soll die Navigation eingeklappt sein, deswegen verstecken wir diese.

@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}
	nav ul {
		display: none;
	}
}

auf Statuswechsel reagieren

Damit die Navigation ein- und ausklappt, muss auf den Status der Checkbox reagiert werden. Des Weiteren blende ich die Checkbox aus.

#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}

Burger zum Kreuz drehen

Jetzt muss noch der Burger zu einem X gedreht werden, bzw. der mittlere Balken ausblenden.

#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}

Animation

Wenn du das Burgermenü noch annimieren möchtest, kann ich dir meine Übungsaufgaben empfehlen: CSS Übungsaufgaben [Animation & Verlauf].

kompletter Code

HTML

<nav>
	<input type="checkbox" id="navigation">
	<label for="navigation" title="Navigation öffnen">
		<div class="burgericon">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</label>
	<ul>
		<li><a href="https://wikipedia.org">Link 1</a></li>
		<li><a href="https://wikipedia.org">Link 2</a></li>
		<li><a href="https://wikipedia.org">Link 3</a></li>
		<li><a href="https://wikipedia.org">Link 4</a></li>
		<li><a href="https://wikipedia.org">Link 5</a></li>
	</ul>
</nav>

CSS

* {
	margin: 0;
	padding: 0;
}
nav {
	width: 100%;
	background-color: white;
}
nav ul{
	list-style: none;
	float: left;
	width: 100%;
}
nav ul li{
	float: left;
	padding: 5px 30px;
	text-align: center;
}
@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}
	nav ul {
		display: none;
	}
}
.burgericon {
	width: 30px;
	height: 30px;
	display: none;
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: black;
}
@media (max-width: 600px) {
	.burgericon {
		display: block;
	}
}
#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}
#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}

CSS Tutorial

Voriger Schritt: CSS Übungsaufgaben [Animation & Verlauf]

Zur Turtorial-Reihe: CSS Tutorial

Marc Borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Instagram logoYouTube Logo
Um ein Kommentar zu verfassen, bitte einloggen.
Kommentare (1)
Marcus

Mega hilfreich! Mir wurde das nie so anschaulich gezeigt!