Menu déroulant : Créez des interfaces utilisateur dynamiques et intuitives #

Le menu déroulant est l’un des composants les plus utilisés d’une interface web : il regroupe des liens de navigation dans une structure hiérarchique pour garder l’écran épuré tout en donnant accès à de nombreuses rubriques. Ce tutoriel vous montre comment créer un menu dynamique en HTML, le styliser en CSS pur, puis l’enrichir en JavaScript pour gérer l’ouverture au clic et l’accessibilité.

Qu’est-ce qu’un menu déroulant HTML ? #

Un menu déroulant HTML regroupe plusieurs liens dans une structure hiérarchique où chaque sous-menu n’apparaît qu’après une action de l’utilisateur (survol ou clic). Sa base repose sur les balises sémantiques <nav>, <ul> et <li>, auxquelles on associe des classes pour personnaliser l’apparence et le comportement.

• La structure en liste imbriquée (un <ul> dans un <li>) hiérarchise l’accès aux contenus.
• La visibilité conditionnelle permet aux sous-menus de ne s’afficher qu’au besoin, pour une navigation épurée.
• Un balisage propre sert le référencement naturel (SEO) en clarifiant l’architecture de l’information pour les robots d’exploration.

C’est un patron d’interface universel : on le retrouve aussi bien sur les sites vitrines que sur les grandes plateformes e-commerce, justement parce qu’il réduit la surcharge visuelle tout en gardant la navigation fluide.

À lire Création Site ClickZou : Prix Devis 2024

▶ YouTube Pierre Giraud 86 818 vues

▶

Création d’un menu déroulant et responsive en HTML et en CSS

Étape 1 — Concevoir la structure HTML et le CSS du menu #

Tout part d’un balisage sémantique propre. On imbrique une liste non ordonnée dans l’élément de navigation, puis on cache ou révèle les sous-menus avec quelques propriétés CSS. Voici les briques essentielles :

• Balises de base : <nav>, <ul>, <li>, <a> assurent lisibilité et compatibilité multi-navigateurs.
• Propriétés CSS clés : display:none masque le sous-menu, display:block l’affiche, position:absolute/relative contrôle la superposition et z-index gère la priorité d’affichage.

Le squelette HTML d’un menu de navigation à deux niveaux ressemble à ceci :

<nav class="menu">
  <ul>
    <li><a href="#">Accueil</a></li>
    <li>
      <a href="#">Services</a>
      <ul class="sous-menu">
        <li><a href="#">Conseil digital</a></li>
        <li><a href="#">Analyse SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Côté style, on rend le menu horizontal, on masque le sous-menu par défaut, puis on l’affiche au survol grâce au sélecteur :hover. C’est le principe du menu déroulant en CSS pur, sans une ligne de JavaScript :

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > ul > li {
  position: relative;     /* repère pour le sous-menu */
  display: inline-block;
}
.menu a {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
  color: #1d2333;
}
/* le sous-menu est caché par défaut */
.menu .sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 100;
}
/* on l'affiche au survol du parent */
.menu li:hover > .sous-menu {
  display: block;
}

La combinaison .sous-menu { display:none } + li:hover > .sous-menu { display:block } suffit à obtenir un menu fonctionnel. Le z-index garantit que le sous-menu passe au-dessus du reste de la page, et position:absolute le détache du flux pour qu’il ne décale pas la mise en page.

À lire Comment créer un blog pour adultes : conseils pour un espace authentique

Étape 2 — Ajouter du JavaScript pour un menu dynamique au clic #

Le survol convient au desktop, mais sur mobile il n’existe pas de :hover fiable : il faut un menu dynamique en JavaScript qui réagit au clic. Le principe est simple : on bascule une classe show sur le sous-menu à chaque clic sur le bouton parent.

const bouton = document.querySelector('.menu-toggle');
const sousMenu = document.querySelector('.sous-menu');
// ouvrir / fermer au clic
bouton.addEventListener('click', function (e) {
  e.preventDefault();
  const ouvert = sousMenu.classList.toggle('show');
  bouton.setAttribute('aria-expanded', ouvert);
});
// fermer si on clique en dehors du menu
document.addEventListener('click', function (e) {
  if (!e.target.closest('.menu')) {
    sousMenu.classList.remove('show');
    bouton.setAttribute('aria-expanded', 'false');
  }
});

Côté CSS, on remplace alors le :hover par une classe .show que le JavaScript ajoute ou retire :

.sous-menu { display: none; }
.sous-menu.show { display: block; }

Cette approche est robuste : elle gère le clic d’ouverture, la fermeture quand on clique ailleurs sur la page, et synchronise l’attribut aria-expanded pour l’accessibilité. Pensez à gérer la concurrence CSS/JS (ne pas laisser une règle :hover contredire la classe .show) et à tester l’intégration si vous travaillez avec React, Angular ou Vue.

Étape 3 — Rendre le menu responsive (menu burger) #

Sur petit écran, on remplace le menu horizontal par un menu burger : une icône à trois barres ouvre la liste verticale. On combine un @media query (pour masquer le menu sous une certaine largeur) et un bouton qui bascule la classe d’ouverture en JavaScript.

À lire Comment choisir un nom de domaine efficace pour votre blog : conseils clés

<button class="burger" aria-label="Ouvrir le menu" aria-expanded="false">
  <span></span><span></span><span></span>
</button>

.burger { display: none; }
@media (max-width: 768px) {
  .burger { display: block; }
  .menu > ul { display: none; flex-direction: column; }
  .menu > ul.open { display: flex; }
}

const burger = document.querySelector('.burger');
const navList = document.querySelector('.menu > ul');
burger.addEventListener('click', function () {
  const ouvert = navList.classList.toggle('open');
  burger.setAttribute('aria-expanded', ouvert);
});

Validez toujours le rendu sur Chrome, Firefox et Safari, ainsi que sur de vrais terminaux mobiles (iOS et Android), car le comportement du tactile diffère du survol desktop.

Améliorer l’accessibilité d’un menu déroulant #

L’accessibilité numérique est un critère prioritaire des organismes publics depuis la directive européenne 2016/2102. Un menu déroulant accessible se reconnaît à plusieurs bonnes pratiques que vous pouvez ajouter sans bouleverser votre code :

• Des attributs ARIA comme aria-haspopup et aria-expanded, qui aident les technologies d’assistance (lecteurs d’écran NVDA, JAWS) à annoncer l’état du menu.
• Un libellé explicite sur chaque bouton ou lien, pour que sa fonction soit comprise immédiatement.
• Une navigation clavier fluide : on doit pouvoir parcourir les items avec les touches Tab et les flèches, et fermer avec Échap.

Les normes WCAG (Web Content Accessibility Guidelines) recommandent ces techniques, qui profitent autant aux personnes en situation de handicap qu’au référencement, en clarifiant la structure pour les robots. En France, le référentiel RGAA 4 reprend ces exigences pour les sites publics.

<button class="menu-toggle"
        aria-haspopup="true"
        aria-expanded="false">
  Services
</button>

Erreurs fréquentes à éviter #

Quelques fautes de conception reviennent souvent et nuisent à la stabilité ou à la lisibilité du menu. Vérifiez ces points avant la mise en ligne :

À lire Portfolio exemples : 50 inspirations 2026

Comparatif des types de menu déroulant #

Selon le projet, plusieurs variantes du menu déroulant HTML coexistent. Voici comment choisir la plus adaptée :

Le choix se fait selon le profil des utilisateurs cibles, le volume de contenu à organiser et le niveau de personnalisation attendu. Un site vitrine se contente d’un menu CSS pur, tandis qu’une application web a tout intérêt à passer par du JavaScript pour gérer le clic et les états.

Questions fréquentes #