Ausklappbare Seitennavigation

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

Eine einklappbare Seitennavigation ist ein verstecktes Menü an der Seite des Bildschirms, das eingeblendet wird, wenn eine Schaltfläche angeklickt wird. Sie hilft dabei, Platz zu sparen, während sie den Benutzern dennoch schnellen Zugriff auf Navigationslinks ermöglicht.

Erstellen Sie eine grundlegende HTML-Struktur mit einer Seitennavigation und einer Umschaltfläche:

<button id="toggleNav">☰ Menu</button>

<nav id="sideNav" class="sidenav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Fügen Sie CSS hinzu, um die Seitennavigation zu gestalten:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}

.sidenav.open {
  width: 250px;
}

Fügen Sie JavaScript hinzu, um die Navigation umzuschalten:

const toggleBtn = document.getElementById('toggleNav');
const sideNav = document.getElementById('sideNav');

toggleBtn.addEventListener('click', function() {
  sideNav.classList.toggle('open');
});

Wenn die Schaltfläche angeklickt wird, fährt die Seitennavigation je nach ihrem aktuellen Zustand ein oder aus.

Aufgabe

Einfach

Machen Sie die Menü-Schaltfläche funktionsfähig:

HTML: Verbinden Sie die Menü-Schaltfläche mit einer JavaScript-Funktion unter Verwendung des onclick-Attributs

JavaScript: Schreiben Sie eine Funktion, die die Seitennavigation öffnet, indem sie deren Breite auf "250px" setzt

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Scandinavian Interior Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="sideNav" class="sidenav">
    <a href="javascript:void(0)" class="close-btn" onclick="closeNav()">X</a>
    <a href="#">Home</a>
    <a href="#">Philosophy</a>
    <a href="#">Materials</a>
    <a href="#">Inspiration</a>
    <a href="#">Contact</a>
  </div>

  <header>
    <span class="open-btn">☰ Menu</span>
    <h1>Scandinavian Interior Design</h1>
  </header>

  <main>
    <section>
      <h2>Calm, Functional, Beautiful</h2>
      <p>
        Scandinavian design is about more than looks — it’s about balance,
        comfort, and harmony. Spaces are uncluttered, airy, and filled with
        light, making homes feel both inviting and practical.
      </p>
    </section>

    <section>
      <h2>Natural Materials</h2>
      <p>
        Wood, stone, wool, and linen are at the heart of Scandinavian interiors.
        These natural elements bring warmth and a sense of connection to nature,
        while ensuring that every item is purposeful and timeless.
      </p>
    </section>
  </main>

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