Mobiles Burger-Menü umschalten

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

Auf kleinen Bildschirmen verwenden Websites häufig 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.

Erstelle zunächst die grundlegende HTML-Struktur: eine Schaltfläche mit 3 -Elementen (in CSS als Linien gestaltet, um das Burger-Symbol zu bilden) und eine ausgeblendete <nav>, die 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 Burgermenü 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;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

Füge jetzt JavaScript hinzu, um das Menü umzuschalten:

// Select the burger button and mobile navigation
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Add click event listener to the burger button
burgerBtn.addEventListener('click', function() {
  // Toggle the hidden class on the mobile navigation
  mobileNav.classList.toggle('hidden');
});

Wenn du auf den burger button klickst, wird die hidden class im navigation menu umgeschaltet, wobei making es erscheinen oder verschwinden lässt.

Aufgabe

Einfach

Füge innerhalb des Event-Listeners für die Burger-Schaltfläche zwei Codezeilen hinzu:

Schalte die Klasse "active" auf dem Button um. Dadurch werden die drei Linien zu einem „X“ animiert.
Schalte die Klasse "active" auf dem Menü um. Dadurch wird das Navigationsmenü ein- und ausgeblendet.

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>