Alternância do menu hambúrguer mobile

Parte da seção JavaScript em Ação do Journey de HTML da Coddy. Lição 13 de 27.

Em telas pequenas, os sites costumam usar um ícone de hambúrguer (☰) em vez de exibir a navegação completa. Quando o usuário clica no ícone de hambúrguer, o JavaScript alterna a visibilidade do menu de navegação.

Primeiro, crie a estrutura HTML básica: um botão com 3 s (estilizados como linhas no CSS para formar o ícone de hambúrguer) e um <nav> oculto que contém os links do 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>

Agora vamos adicionar um CSS básico para estilizar o menu hambúrguer:

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

Agora, adicione JavaScript para alternar o 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');
});

Quando você clica no botão de menu, a classe hidden é alternada no menu de navegação, fazendo com que ele apareça ou desapareça.

Desafio

Fácil

Dentro do listener de eventos do botão de menu, adicione duas linhas de código:

Alterne a classe "active" no botão. Isso animará as três linhas, transformando-as em um “X”.
Alterne a classe "active" no menu. Isso fará com que o menu de navegação apareça e desapareça.

Experimente você mesmo

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

  <!-- Menu de Navegação -->
  <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>

  <!-- Conteúdo Principal -->
  <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>