Переключатель мобильного бургер-меню

Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 13 из 27.

На маленьких экранах веб-сайты часто используют значок burger (☰) вместо отображения полной навигации. Когда пользователь нажимает на значок burger, JavaScript переключает видимость меню навигации.

Сначала создайте базовую структуру HTML: кнопку с 3 элементами <span> (стилизованными в CSS как линии, образующие значок burger) и скрытый элемент <nav>, содержащий ссылки меню.

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

Теперь добавим базовый CSS, чтобы стилизовать бургер-меню:

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

Теперь добавь JavaScript, чтобы переключать menu:

// 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');
});

Когда вы выполняете click по burger button, у navigation menu переключается hidden class, making его видимым или скрытым.

Задание

Легко

Внутри обработчика событий кнопки burger добавь две строки кода:

Переключай класс "active" у button. Это анимирует три линии, превращая их в «X».
Переключай класс "active" у menu. Это позволит навигационному меню появляться и исчезать.

Попробуйте сами

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Кнопка-бургер -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- Навигационное меню -->
  <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>

  <!-- Основное содержимое -->
  <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>