Bascule du menu burger mobile

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 13 sur 27.

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

Tout d’abord, crée la structure HTML de base : un bouton avec 3 s (stylisés comme des 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>

Ajoutons maintenant un peu de CSS de base pour styliser le 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;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

Maintenant, ajoutez du JavaScript pour basculer le 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');
});

Lorsque vous cliquez sur le bouton burger, la classe hidden est activée ou désactivée sur le menu de navigation, ce qui le fait apparaître ou disparaître.

Défi

Facile

À l’intérieur de l’écouteur d’événement du bouton burger, ajoutez deux lignes de code :

Basculez la classe "active" sur le bouton. Cela animera les trois lignes pour former 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>