Attivare e disattivare il menu hamburger su mobile

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 13 di 27.

Sugli schermi piccoli, i siti web spesso usano un menu hamburger (☰) invece di mostrare la navigazione completa. Quando l’utente fa clic sull’icona del menu hamburger, JavaScript attiva o disattiva la visibilità del menu di navigazione.

Per prima cosa, crea la struttura HTML di base: un pulsante con 3 elementi span (stilizzati come linee in CSS per formare l'icona dell'hamburger) e un elemento <nav> nascosto che contiene i link del 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>

Ora aggiungiamo del CSS di base per dare uno stile al menu hamburger:

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

/* Mostra la navigazione quando non ha la classe hidden */
nav:not(.hidden) {
  display: block;
}

Ora aggiungi JavaScript per attivare o disattivare il menu:

// Seleziona il pulsante hamburger e il menu di navigazione mobile
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Aggiungi un gestore dell'evento click al pulsante hamburger
burgerBtn.addEventListener('click', function() {
  // Attiva o disattiva la classe hidden nel menu di navigazione mobile
  mobileNav.classList.toggle('hidden');
});

Quando fai clic sul pulsante hamburger, la classe hidden viene attivata o disattivata nel menu di navigazione, facendolo apparire o scomparire.

Sfida

Facile

All'interno del listener di eventi del pulsante hamburger, aggiungi due righe di codice:

Attiva o disattiva la classe "active" sul pulsante. Questo animerà le tre linee trasformandole in una “X”.
Attiva o disattiva la classe "active" sul menu. In questo modo il menu di navigazione apparirà e scomparirà.

Provalo tu

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

  <!-- Menu di navigazione -->
  <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>

  <!-- Contenuto principale -->
  <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>