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

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

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

Сначала создайте базовую структуру HTML: кнопку с 3 элементами span (стилизованными под линии в CSS для формирования иконки «бургер») и скрытый <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;
}

/* Показать навигацию, когда у нее нет класса hidden */
nav:not(.hidden) {
  display: block;
}

Теперь добавьте JavaScript для переключения меню:

// Выберите кнопку бургер-меню и мобильную навигацию
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Добавьте прослушиватель события клика на кнопку бургер-меню
burgerBtn.addEventListener('click', function() {
  // Переключите класс hidden для мобильной навигации
  mobileNav.classList.toggle('hidden');
});

При нажатии на кнопку-бургер класс hidden переключается в навигационном меню, заставляя его появляться или исчезать.

Задание

Легко

Внутри слушателя событий для кнопки-бургер добавьте две строки кода:

Переключите класс "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>