Bascule du menu burger mobile

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 13 sur 27.

Sur les petits écrans, les sites web utilisent souvent une icône burger (☰) au lieu d'afficher la navigation complète. Lorsque l'utilisateur clique sur l'icône burger, JavaScript bascule la visibilité du menu de navigation.

Tout d'abord, créez la structure HTML de base : un bouton avec 3 spans (stylisés sous forme de lignes en CSS pour former l'icône burger) et un <nav> masqué qui contient les liens du 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>

Maintenant, ajoutons du CSS de base pour styliser le menu burger :

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

/* Affiche la navigation lorsqu'elle n'a pas la classe hidden */
nav:not(.hidden) {
  display: block;
}

Maintenant, ajoutez du JavaScript pour basculer le menu :

// Sélectionner le bouton burger et la navigation mobile
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Ajouter un écouteur d'événement de clic au bouton burger
burgerBtn.addEventListener('click', function() {
  // Basculer la classe 'hidden' sur la navigation mobile
  mobileNav.classList.toggle('hidden');
});

Lorsque vous cliquez sur le bouton burger, la classe hidden est basculée sur le menu de navigation, le faisant apparaître ou disparaître.

Défi

Facile

À l'intérieur de l'écouteur d'événement pour le bouton burger, ajoutez deux lignes de code :

Basculez la classe "active" sur le bouton — cela animera les trois lignes en un « X ».
Basculez la classe "active" sur le menu — cela fera apparaître et disparaître le menu de navigation.

Essayez vous-même

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

  <!-- Menu de Navigation -->
  <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>

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