Przełączanie menu hamburgerowego na urządzeniach mobilnych

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 13 z 27.

Na małych ekranach strony internetowe często używają ikony hamburgera (☰) zamiast wyświetlać pełną nawigację. Gdy użytkownik kliknie ikonę hamburgera, JavaScript przełącza widoczność menu nawigacyjnego.

Najpierw utwórz podstawową strukturę HTML: przycisk z 3 elementami <span> (ostylowanymi w CSS jako linie tworzące ikonę hamburgera) oraz ukryty element <nav> zawierający linki menu.

<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>

Teraz dodajmy podstawowy CSS, aby nadać styl menu hamburgerowemu:

.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;
}

/* Pokaż nawigację, gdy nie ma klasy hidden */
nav:not(.hidden) {
  display: block;
}

Teraz dodaj JavaScript, aby przełączać menu:

// Wybierz przycisk menu i nawigację mobilną
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Dodaj do przycisku menu nasłuchiwanie zdarzenia click
burgerBtn.addEventListener('click', function() {
  // Przełącz klasę hidden w nawigacji mobilnej
  mobileNav.classList.toggle('hidden');
});

Po kliknięciu przycisku menu przełączana jest klasa ukrywająca w menu nawigacyjnym, przez co menu się pojawia lub znika.

Wyzwanie

Łatwy

Wewnątrz obsługi zdarzenia przycisku menu burgerowego dodaj dwie linie kodu:

Przełącz klasę "active" przycisku button. Spowoduje to animację trzech linii, które ułożą się w „X”.
Przełącz klasę "active" menu menu. Spowoduje to wyświetlanie i ukrywanie menu nawigacyjnego.

Spróbuj swoich sił

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

  <!-- Menu nawigacyjne -->
  <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>

  <!-- Treść główna -->
  <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>