Navigation latérale repliable

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

Une navigation latérale pliable est un menu caché sur le côté de l'écran qui s'affiche par glissement lorsqu'on clique sur un bouton. Elle permet de gagner de l'espace tout en offrant aux utilisateurs un accès rapide aux liens de navigation.

Créez une structure HTML de base avec une navigation latérale et un bouton de bascule :

<button id="toggleNav">☰ Menu</button>

<nav id="sideNav" class="sidenav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Ajoutez du CSS pour styliser la navigation latérale :

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}

.sidenav.open {
  width: 250px;
}

Ajoutez du JavaScript pour basculer la navigation :

const toggleBtn = document.getElementById('toggleNav');
const sideNav = document.getElementById('sideNav');

toggleBtn.addEventListener('click', function() {
  sideNav.classList.toggle('open');
});

Lorsque le bouton est cliqué, la navigation latérale glissera vers l'intérieur ou l'extérieur selon son état actuel.

Défi

Facile

Rendez le bouton du menu fonctionnel :

HTML : Connectez le bouton du menu à une fonction JavaScript en utilisant l'attribut onclick

JavaScript : Écrivez une fonction qui ouvre la navigation latérale en définissant sa largeur à "250px"

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Scandinavian Interior Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="sideNav" class="sidenav">
    <a href="javascript:void(0)" class="close-btn" onclick="closeNav()">X</a>
    <a href="#">Home</a>
    <a href="#">Philosophy</a>
    <a href="#">Materials</a>
    <a href="#">Inspiration</a>
    <a href="#">Contact</a>
  </div>

  <header>
    <span class="open-btn">☰ Menu</span>
    <h1>Scandinavian Interior Design</h1>
  </header>

  <main>
    <section>
      <h2>Calm, Functional, Beautiful</h2>
      <p>
        Scandinavian design is about more than looks — it’s about balance,
        comfort, and harmony. Spaces are uncluttered, airy, and filled with
        light, making homes feel both inviting and practical.
      </p>
    </section>

    <section>
      <h2>Natural Materials</h2>
      <p>
        Wood, stone, wool, and linen are at the heart of Scandinavian interiors.
        These natural elements bring warmth and a sense of connection to nature,
        while ensuring that every item is purposeful and timeless.
      </p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>