Alternância do menu hambúrguer mobile

Parte da seção JavaScript in Action 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 mostrar 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 spans (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 pouco de 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;
}

/* Exibe a navegação quando ela não possui a classe hidden */
nav:not(.hidden) {
  display: block;
}

Agora, adicione JavaScript para alternar o menu:

// Seleciona o botão hambúrguer e a navegação móvel
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Adiciona um ouvinte de evento de clique ao botão hambúrguer
burgerBtn.addEventListener('click', function() {
  // Alterna a classe 'hidden' na navegação móvel
  mobileNav.classList.toggle('hidden');
});

Quando você clica no botão hambúrguer, a classe hidden é alternada no menu de navegação, fazendo-o aparecer ou desaparecer.

Desafio

Fácil

Dentro do event listener para o botão hambúrguer, adicione duas linhas de código:

Alterne a classe "active" no button — isso animará as três linhas 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 Hambúrguer -->
  <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>