Comment créer un menu coulissant en CSS sans JavaScript ?

Il est possible de créer un menu coulissant en CSS en utilisant une checkbox cachée associée à des sélecteurs CSS comme :checked. Cette technique permet d’ouvrir et de fermer un menu overlay sans écrire une seule ligne de JavaScript, tout en gardant une animation fluide et moderne.

Pourquoi utiliser un menu coulissant sur un site web ?

Un menu coulissant améliore l’expérience utilisateur, notamment sur mobile. Il permet de gagner de la place à l’écran, de rendre la navigation plus claire et d’obtenir un design plus moderne. C’est aujourd’hui une solution très utilisée sur les sites responsive et les applications web.

Un menu overlay en CSS est-il responsive ?

Oui, un menu overlay en CSS peut être totalement responsive. En utilisant des unités flexibles comme les pourcentages ou les vh, le menu s’adapte facilement aux différentes tailles d’écran, que ce soit sur smartphone, tablette ou ordinateur.

Menu coulissant moderne et responsive en CSS + code complet

Coder un menu coulissant moderne et responsive en CSS et sans JavaScript est beaucoup plus simple qu’il n’y paraît. Dans ce tutoriel, vous allez apprendre à coder un menu coulissant avec overlay uniquement avec du HTML et du CSS, tout en comprenant chaque étape du fonctionnement. Une excellente manière de progresser en CSS tout en réalisant un composant responsive, fluide et professionnel.

Comprenez comment créer un menu coulissant moderne et responsive sans utiliser JavaScript, grâce à des techniques CSS accessibles aux débutants.
Apprenez à manipuler les transitions, les overlays et les positions CSS pour rendre vos interfaces web plus professionnelles et agréables à utiliser.
Découvrez une méthode simple et légère pour améliorer la navigation mobile de vos sites tout en progressant concrètement en HTML et CSS.

Sur un site moderne, le menu de navigation joue un rôle essentiel. Pourtant, beaucoup de débutants pensent qu’il faut absolument utiliser du JavaScript pour créer un menu coulissant élégant avec un overlay sombre en arrière-plan : ce n’est pas vrai.

Dans ce tutoriel webDesign, nous allons coder ensemble un véritable menu coulissant en overlay étape par étape. Vous allez comprendre chaque ligne de code, même si vous débutez complètement. Alors préparez votre éditeur de code, et c’est parti.

Voir la démo

À quoi ressemble notre menu coulissant ?
- Pourquoi créer un menu coulissant ?
- Structure du projet
Première étape : la structure HTML
Comprendre le fonctionnement du menu coulissant
Passons maintenant au CSS
Création du panneau coulissant
Le plus important : L'ouverture du menu coulissant
Comment améliorer votre menu coulissant ?
- Les limites de cette technique CSS
Le code complet du menu coulissant avec overlay en CSS
FAQ : Menu coulissant en CSS

À quoi ressemble notre menu coulissant ?

Le résultat final permettra :

d’afficher un bouton “Menu”
d’ouvrir un panneau latéral coulissant
d’ajouter un overlay sombre sur la page
de fermer le menu sans JavaScript
d’obtenir une animation fluide et moderne

Le tout avec uniquement du HTML et du CSS.

Pourquoi créer un menu coulissant ?

Aujourd’hui, le menu coulissant est partout :

sur mobile
dans les applications web
dans les interfaces modernes
sur les portfolios
sur les boutiques en ligne

Il permet de gagner de la place à l’écran tout en gardant une navigation claire.

C’est aussi une excellente solution responsive. Sur smartphone, un menu classique horizontal devient vite illisible. Le menu coulissant résout immédiatement ce problème.

Et puis entre nous… voir un panneau glisser proprement à l’écran, ça fait toujours son petit effet.

Structure du projet

Pour commencer, créez deux fichiers :

index.html
style.css

Votre fichier HTML contiendra la structure du menu.
Le fichier CSS s’occupera entièrement du design et des animations.

Première étape : la structure HTML

Commençons par le HTML complet :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Menu overlay CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<input type="checkbox" id="menu-toggle">

<label for="menu-toggle" class="menu-open">
  ☰ Menu
</label>

<div class="overlay"></div>

<nav class="side-menu">

  <label for="menu-toggle" class="menu-close">
    ×
  </label>

  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Formations</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</nav>

<main>
  <h1>Mon site</h1>
  <p>Bienvenue sur mon site.</p>
</main>

</body>
</html>

À première vue, cela peut sembler impressionnant si vous débutez. Pourtant, le principe est très simple.

Nous allons décortiquer chaque élément tranquillement.

Comprendre le fonctionnement du menu coulissant

Le cœur du système repose sur cette ligne :

<input type="checkbox" id="menu-toggle">

Oui, une simple checkbox. C’est l’astuce.

Normalement, une checkbox sert à cocher une case dans un formulaire. Mais ici, nous allons détourner son comportement pour ouvrir et fermer notre menu coulissant.

Quand la checkbox sera cochée :

le menu apparaîtra
l’overlay deviendra visible

Quand elle sera décochée :

tout disparaîtra

E tout cela sans JavaScript.

Pourquoi utiliser un label ?

Regardez ce bouton :

<label for="menu-toggle" class="menu-open">
  ☰ Menu
</label>

L’attribut for="menu-toggle" indique que ce label contrôle la checkbox ayant l’identifiant menu-toggle.

Concrètement :

lorsque l’utilisateur clique sur le label
la checkbox se coche automatiquement

C’est une technique très utilisée en CSS moderne.

Le symbole :

☰

représente l’icône “hamburger”, très populaire pour les menus mobiles.

Création de l’overlay

Voici l’overlay :

<div class="overlay"></div>

Son rôle est de :

assombrir l’arrière-plan
mettre le menu en valeur
améliorer l’expérience utilisateur

Sans overlay, le menu semblerait flotter bizarrement au-dessus du contenu. Avec lui, l’interface devient immédiatement plus professionnelle.

Le menu latéral

Voici notre panneau coulissant :

<nav class="side-menu">

La balise <nav> est idéale ici, car elle représente une zone de navigation.

À l’intérieur, nous retrouvons :

le bouton de fermeture
les liens du menu

Le bouton de fermeture

Voici le code :

<label for="menu-toggle" class="menu-close">
  ×
</label>

Encore une fois, nous utilisons un label lié à la checkbox.

Quand l’utilisateur clique sur le “×” :

la checkbox se décoche
le menu disparaît

Simple et malin.

Passons maintenant au CSS

Voici le début du fichier :

* {
  box-sizing: border-box;
}

Cette règle est devenue quasiment obligatoire dans les projets modernes. Elle permet de mieux gérer les tailles des éléments.

Sans elle, les calculs de largeur deviennent vite pénibles.

👉 Pour en savoir plus : Normalize.css VS Reset.css

Styliser le body

Ajoutez ensuite :

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

Ici :

margin: 0 supprime les marges par défaut du navigateur
font-family définit la police du site

Sinon, votre page aurait des petits espaces blancs peu élégants.

Cacher la checkbox

Maintenant :

#menu-toggle {
  display: none;
}

Très important car nous ne voulons pas afficher la checkbox à l’écran.

Elle sert uniquement de déclencheur logique. L’utilisateur ne doit jamais la voir.

Styliser le bouton d’ouverture

Ajoutez :

.menu-open {
  display: inline-block;
  margin: 20px;
  padding: 12px 18px;
  background: #111;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}

Décortiquons cela.

display: inline-block : permet d’ajouter des dimensions et des marges au label.
padding : ajoute de l’espace intérieur.
background : définit la couleur du bouton.
cursor: pointer : affiche une petite main au survol.

C’est important pour signaler que l’élément est cliquable.

Création de l’overlay sombre

Ajoutez maintenant :

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 10;
}

Ici, plusieurs notions importantes apparaissent.

Comprendre position fixed

position: fixed;

Cette propriété fixe l’élément par rapport à la fenêtre du navigateur.

Même si l’utilisateur scrolle :

l’overlay reste visible
il couvre toujours l’écran

👉 Pour ceux qui débutent : Le positionnement CSS

À quoi sert inset: 0 ?

inset: 0;

C’est une écriture moderne équivalente à :

top: 0;
right: 0;
bottom: 0;
left: 0;

Autrement dit : “prends toute la place disponible”.

L’overlay couvre donc tout l’écran.

Pourquoi utiliser rgba ?

background: rgba(0, 0, 0, 0.55);

rgba permet d’ajouter de la transparence.

Ici :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

noir = 0,0,0
opacité = 0.55

Résultat :

l’arrière-plan devient sombre
mais reste légèrement visible

C’est exactement l’effet recherché dans un menu overlay moderne.

👉 Pour aller plus loin : Les codes couleur en CSS

Masquer l’overlay par défaut

Ces lignes sont essentielles :

opacity: 0;
visibility: hidden;

Au chargement de la page :

l’overlay est invisible
il ne gêne pas les clics

Puis :

transition: 0.3s;

Cela ajoute une animation fluide. Sans transition, l’apparition serait brutale.

Et franchement… les animations brutales, c’est un peu comme une porte qui claque à 3h du matin.

Création du panneau coulissant

Ajoutez maintenant :

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 80%;
  height: 100vh;
  background: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 20;
  padding: 60px 25px;
}

C’est ici que la magie opère.

Pourquoi utiliser translateX ?

transform: translateX(-100%);

Cette ligne déplace le menu complètement hors écran.

Le menu existe toujours. Mais il est simplement déplacé vers la gauche.

Puis, lorsque le menu sera ouvert, nous remettrons :

translateX(0)

Pour le faire revenir. Cette technique produit une animation extrêmement fluide.

Comprendre les unités vh

height: 100vh;

vh signifie : Viewport Height.

100vh représente toute la hauteur visible de l’écran.

Votre menu prend donc toute la hauteur du navigateur.

👉 Pour en savoir plus : Les unités viewport en CSS

Gestion des couches avec z-index

Ici :

z-index: 20;

Le menu doit apparaître au-dessus de l’overlay.

Sinon :

l’overlay cacherait le menu
impossible de cliquer dessus

C’est pour cela que :

overlay = 10
menu = 20

Le plus grand chiffre passe devant.

Styliser le bouton de fermeture

Ajoutez :

.menu-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 36px;
  cursor: pointer;
}

Le bouton “×” est placé dans le coin supérieur droit du menu.

Grâce à :

position: absolute;

vous pouvez le positionner précisément.

Styliser les liens du menu

Ajoutez :

.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu li {
  margin-bottom: 20px;
}

.side-menu a {
  color: #111;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
}

Ici :

on retire les puces
on espace les éléments
on agrandit les liens

Le menu devient immédiatement plus lisible.

Le plus important : L’ouverture du menu coulissant

Voici enfin le mécanisme d’ouverture :

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  visibility: visible;
}

Et :

#menu-toggle:checked ~ .side-menu {
  transform: translateX(0);
}

Ces deux lignes sont le cerveau du système.

Comprendre :checked

:checked détecte si la checkbox est cochée.

Autrement dit :

si le menu est activé
alors le CSS change automatiquement

C’est une pseudo-classe extrêmement puissante.

Comprendre le symbole ~

Le symbole :

Il s’appelle le sélecteur de frères généraux et signifie : “applique le style aux éléments suivants”.

Donc ici :

#menu-toggle:checked ~ .side-menu

veut dire : “si la checkbox est cochée, modifie le menu”.

C’est ce mécanisme qui permet de remplacer JavaScript.

Ajouter du contenu principal

Enfin :

main {
  padding: 20px;
}

Cela ajoute simplement un peu d’espace autour du contenu.

Comment améliorer votre menu coulissant ?

Maintenant que votre menu fonctionne, vous pouvez aller beaucoup plus loin.

Par exemple :

ajouter des icônes
créer un effet blur
faire apparaître le menu depuis la droite
ajouter un logo
rendre les animations plus sophistiquées
intégrer le menu dans un header responsive

Et surtout : vous venez d’apprendre une technique très utilisée dans les interfaces modernes.

Les limites de cette technique CSS

Soyons honnêtes : cette méthode est excellente pour apprendre. Mais sur des projets très complexes, JavaScript reste parfois nécessaire.

Par exemple :

pour gérer plusieurs menus
pour fermer automatiquement au clic extérieur
pour créer des animations avancées

Cependant, pour un site vitrine, un portfolio ou un petit projet personnel, cette solution CSS-only fonctionne parfaitement.

Et elle présente plusieurs avantages :

légère
rapide
facile à maintenir
sans dépendance externe

Le code complet du menu coulissant avec overlay en CSS

Voir la démo

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Menu overlay CSS</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }

      #menu-toggle {
        display: none;
      }

      .menu-open {
        display: inline-block;
        margin: 20px;
        padding: 12px 18px;
        background: #111;
        color: white;
        cursor: pointer;
        border-radius: 6px;
      }

      .overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        z-index: 10;
      }

      .side-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 80%;
        height: 100vh;
        background: white;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 20;
        padding: 60px 25px;
      }

      .menu-close {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 36px;
        cursor: pointer;
      }

      .side-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .side-menu li {
        margin-bottom: 20px;
      }

      .side-menu a {
        color: #111;
        text-decoration: none;
        font-size: 22px;
        font-weight: bold;
      }

      #menu-toggle:checked ~ .overlay {
        opacity: 1;
        visibility: visible;
      }

      #menu-toggle:checked ~ .side-menu {
        transform: translateX(0);
      }

      main {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="menu-toggle" />

    <label for="menu-toggle" class="menu-open">☰ Menu</label>

    <div class="overlay"></div>

    <nav class="side-menu">
      <label for="menu-toggle" class="menu-close">×</label>

      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Formations</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <h1>Ma page</h1>
      <p>Contenu de la page...</p>
    </main>
  </body>
</html>

FAQ : Menu coulissant en CSS

Vous venez de coder un véritable menu coulissant en overlay uniquement avec du HTML et du CSS. Et mine de rien, ce petit projet vous a permis de découvrir énormément de notions importantes : les positions fixes, les transitions, les transformations CSS, les pseudo-classes et même une logique interactive sans JavaScript.

Le plus intéressant dans ce genre d’exercice, ce n’est pas simplement d’obtenir un joli menu. C’est surtout de comprendre comment le CSS peut devenir dynamique lorsqu’on apprend à exploiter intelligemment les sélecteurs et les états des éléments HTML.

Voir la démo

À partir de maintenant, vous pouvez personnaliser ce menu coulissant comme vous le souhaitez. Changez les couleurs, ajoutez des animations, créez une version responsive complète ou intégrez-le dans vos futurs projets web. Et surtout, amusez-vous à expérimenter. En développement web, c’est souvent en testant des idées un peu “bizarres” qu’on progresse le plus vite.

👉 Pour aller plus loin, voici d’autres projets en CSS :

Alban Guillier

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr

Menu coulissant moderne et responsive en CSS + code complet

À quoi ressemble notre menu coulissant ?

Pourquoi créer un menu coulissant ?

Structure du projet

Première étape : la structure HTML

Comprendre le fonctionnement du menu coulissant

Pourquoi utiliser un label ?

Création de l’overlay

Le menu latéral

Le bouton de fermeture

Passons maintenant au CSS

Styliser le body

Cacher la checkbox

Styliser le bouton d’ouverture

Création de l’overlay sombre

Comprendre position fixed

À quoi sert inset: 0 ?

Pourquoi utiliser rgba ?

Des formations informatique pour tous !

Masquer l’overlay par défaut

Création du panneau coulissant

Pourquoi utiliser translateX ?

Comprendre les unités vh

Gestion des couches avec z-index

Styliser le bouton de fermeture

Styliser les liens du menu

Le plus important : L’ouverture du menu coulissant

Comprendre :checked

Comprendre le symbole ~

Ajouter du contenu principal

Comment améliorer votre menu coulissant ?

Les limites de cette technique CSS

Le code complet du menu coulissant avec overlay en CSS

FAQ : Menu coulissant en CSS

Comment créer un menu coulissant en CSS sans JavaScript ?

Pourquoi utiliser un menu coulissant sur un site web ?

Un menu overlay en CSS est-il responsive ?

Recevez chaque semaine nos articles et tutoriels directement sur votre boîte mail

Articles relatifs