Responsive Navigation

Eine responsive Navigation passt sich an die Bildschirmgröße an: Auf dem Desktop siehst du alle Links nebeneinander, auf dem Smartphone ein kompaktes Burger-Menü (☰), das sich per Klick öffnet und schließt.

Das Layout steuerst du mit CSS und Media Queries, das Öffnen und Schließen mit JavaScript. Die HTML-Grundlagen zu Navigationen kennst du aus den Kapiteln Horizontale Menüs und Vertikale Menüs.

Was ist responsive Navigation?

Auf großen Bildschirmen ist Platz genug für eine horizontale Navigation. Auf kleinen Geräten würden die Links zu eng werden – deshalb werden sie in ein ausklappbares Menü gepackt.

HTML-Grundstruktur

Du brauchst drei Bausteine: ein <nav>-Element, einen Burger-Button und eine Link-Liste. Wichtig sind eindeutige id-Attribute – damit greift JavaScript später darauf zu.

1<nav class="navigation">
2    <button class="burger" id="burgerBtn" aria-label="Menü öffnen">☰</button>
3    <ul class="menu" id="menu">
4        <li><a href="#">Start</a></li>
5        <li><a href="#">Kurse</a></li>
6        <li><a href="#">Kontakt</a></li>
7    </ul>
8</nav>

• burgerBtn – der Button zum Öffnen und Schließen
• menu – die Liste mit den Navigationslinks
• aria-label – beschreibt den Button für Screenreader

Menü mit JavaScript steuern

Beim Klick auf den Burger-Button fügst du dem Menü die Klasse open hinzu – oder entfernst sie wieder. Dafür eignet sich classList.toggle():

1const burgerBtn = document.getElementById("burgerBtn");
2const menu = document.getElementById("menu");
3
4burgerBtn.addEventListener("click", function() {
5    menu.classList.toggle("open");
6});

Wichtig: JavaScript ändert nur die Klasse – ob das Menü sichtbar ist, legst du in CSS fest (z. B. mit display: none und display: flex).

CSS für Mobile und Desktop

Auf dem Smartphone ist das Menü zuerst versteckt und wird nur mit der Klasse open angezeigt. Ab dem Tablet-Breakpoint blendest du den Burger-Button aus und zeigst die Links dauerhaft an:

1.navigation {
2    background-color: #2c3e50;
3    padding: 8px 12px;
4}
5
6/* Mobile: Menü standardmäßig versteckt */
7.menu {
8    display: none;
9    flex-direction: column;
10    gap: 8px;
11    list-style: none;
12    margin: 0;
13    padding: 0;
14}
15
16/* Mobile: Menü sichtbar, wenn Klasse .open gesetzt ist */
17.menu.open {
18    display: flex;
19}
20
21.menu a {
22    display: block;
23    padding: 8px 16px;
24    color: #ecf0f1;
25    text-decoration: none;
26    border-radius: 4px;
27}
28
29.menu a:hover {
30    background-color: #34495e;
31}
32
33.burger {
34    font-size: 24px;
35    color: #ecf0f1;
36    background: none;
37    border: none;
38    cursor: pointer;
39}

1/* Desktop: Burger verstecken, Menü immer sichtbar */
2@media (min-width: 768px) {
3    .burger {
4        display: none;
5    }
6
7    .menu {
8        display: flex;
9        flex-direction: row;
10        gap: 16px;
11    }
12}

Mehr zu Breakpoints und Media Queries findest du im Kapitel Media Queries in CSS und im Kapitel Mobile First Prinzip.