Mobiles Burger-Menü umschalten

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 13 von 27.

Auf kleinen Bildschirmen verwenden Websites oft ein Burger-Symbol (☰), anstatt die vollständige Navigation anzuzeigen. Wenn der Benutzer auf das Burger-Symbol klickt, schaltet JavaScript die Sichtbarkeit des Navigationsmenüs um.

Erstellen Sie zuerst die grundlegende HTML-Struktur: eine Schaltfläche mit 3 spans (in CSS als Linien gestaltet, um das Burger-Icon zu bilden) und ein verstecktes <nav>, das die Menü-Links enthält.

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Fügen wir nun etwas grundlegendes CSS hinzu, um das Burger-Menü zu gestalten:

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* Zeige die Navigation an, wenn sie nicht die Klasse "hidden" hat */
nav:not(.hidden) {
  display: block;
}

Fügen Sie nun JavaScript hinzu, um das Menü umzuschalten:

// Wähle den Burger-Button und die mobile Navigation aus
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Füge dem Burger-Button einen Click-Event-Listener hinzu
burgerBtn.addEventListener('click', function() {
  // Schalte die "hidden"-Klasse für die mobile Navigation um
  mobileNav.classList.toggle('hidden');
});

Wenn Sie auf die Burger-Schaltfläche klicken, wird die Klasse hidden im Navigationsmenü umgeschaltet, wodurch es erscheint oder verschwindet.

Aufgabe

Einfach

Fügen Sie innerhalb des Event-Listeners für den Burger-Button zwei Zeilen Code hinzu:

Schalten Sie die Klasse "active" für den button um – dies animiert die drei Linien zu einem „X“.
Schalten Sie die Klasse "active" für das menu um – dies lässt das Navigationsmenü erscheinen und verschwinden.

Probier es selbst

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Burger-Button -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- Navigationsmenü -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Hauptinhalt -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

  <script src="script.js"></script>
</body>
</html>