Créer un menu responsive en HTML et CSS est une étape incontournable pour tout site web moderne. Que vous soyez débutant ou développeur confirmé, savoir concevoir un menu clair, esthétique et adaptable à toutes les tailles d’écran est essentiel. En effet, un menu bien pensé influence directement la navigation, le taux de rebond et même le référencement naturel (SEO) de votre site.

Aujourd’hui, la majorité des visiteurs utilisent leur smartphone pour naviguer sur internet. C’est pourquoi un site web qui ne s’adapte pas correctement aux petits écrans risque de perdre des utilisateurs. Le responsive design n’est plus un luxe : c’est une norme.

Dans ce tutoriel complet, nous allons voir comment créer cinq menus responsives différents, tous à partir de la même base HTML, mais avec des styles CSS variés et modernes. Vous verrez comment un même code source peut se transformer complètement selon les choix graphiques et techniques.

Nous allons procéder étape par étape. Vous apprendrez à :

• Créer une structure HTML propre et sémantique.
• Utiliser les propriétés CSS pour gérer la disposition, les couleurs et les animations.
• Ajouter des media queries pour rendre le menu responsive.
• Explorer plusieurs approches : horizontal, vertical, fixe, animé, et plus encore.

Le but est que vous puissiez, à la fin, concevoir votre propre menu responsive sur mesure, quel que soit votre niveau actuel. Ce tutoriel est conçu pour être pédagogique, progressif et accessible à tous.

La structure HTML de base du menu

Avant de plonger dans les styles CSS, il faut poser les fondations : une structure HTML claire, simple et réutilisable pour chacun de nos cinq exemples de design de menu responsive en CSS.

Voici le code HTML de départ que nous allons utiliser dans tout le tutoriel. Il s’agit d’un menu de navigation classique, tel qu’on peut le retrouver sur un site vitrine, un blog ou une application web.

<nav class="menu">
  <div class="logo">MonSite</div>
  <ul class="menu-links">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-toggle">☰</div>
</nav>

Explication du code HTML

Prenons quelques instants pour comprendre cette structure.
L’élément <nav> représente notre barre de navigation principale. Il contient trois éléments clés :

1. Le logo : dans une <div> nommée .logo, qui sert d’identité visuelle au site. Vous pouvez y placer une image ou simplement le nom du site.
2. La liste de liens : elle est structurée avec une balise <ul> contenant plusieurs <li>. Chaque élément de la liste correspond à une page du site.
3. L’icône “burger” : représentée par le caractère ☰, c’est le symbole ☰ bien connu qui apparaît sur mobile pour ouvrir ou fermer le menu.

Cette structure est volontairement simple et ne dépend d’aucune bibliothèque externe. Cela vous permettra de comprendre les mécanismes CSS en détail et de pouvoir personnaliser chaque version selon vos goûts.

Exemple 1 : Menu horizontal simple et fluide

Commençons par un premier menu : sobre, moderne et parfaitement fluide. C’est le type de menu qu’on retrouve souvent sur les sites vitrines ou portfolios.

Objectif de ce premier exemple

Créer un menu horizontal, centré, qui s’adapte automatiquement à la taille de l’écran. Sur grand écran, le menu est affiché en ligne. Sur mobile, les liens se réorganisent verticalement grâce aux media queries.

Voici le code du menu responsive CSS complet :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222;
  color: #fff;
  padding: 15px 30px;
}

.menu .logo {
  font-size: 1.5em;
  font-weight: bold;
}

.menu-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.menu-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.menu-links a:hover {
  color: #00bcd4;
}

.menu-toggle {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .menu-links {
    display: none;
    flex-direction: column;
    background-color: #222;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 20px 0;
  }

  .menu.active .menu-links {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

Explication du style

Le menu repose sur un système de flexbox, ce qui permet d’aligner facilement les éléments et d’obtenir une mise en page fluide.
La classe .menu-toggle est masquée par défaut sur grand écran et ne s’affiche qu’en dessous de 768 pixels de largeur.
Dans cette version, le menu responsive se contente de passer d’un affichage horizontal à vertical. Cela suffit déjà à le rendre parfaitement utilisable sur mobile.

Vous pouvez améliorer ce comportement avec un peu de JavaScript si vous souhaitez que le bouton “burger” ouvre ou ferme le menu en cliquant dessus.

Exemple 2 : Menu burger responsive (mobile first)

Dans ce deuxième exemple, nous allons reprendre exactement la même structure HTML que précédemment, mais cette fois, le design et le comportement du menu seront totalement différents.

Le principe du menu burger mobile first est simple :
le menu est conçu d’abord pour les écrans mobiles, puis enrichi pour les écrans plus larges grâce à des media queries.
Cela garantit une expérience utilisateur fluide sur smartphone, qui reste aujourd’hui le support le plus utilisé.

Objectif du design

L’idée est d’avoir :

• Un menu masqué par défaut sur mobile.
• Une icône burger visible, sur laquelle on peut cliquer pour faire apparaître le menu.
• Sur grand écran, le menu s’affiche directement en ligne, sans burger.
• Une animation fluide pour l’ouverture et la fermeture.

Code du menu responsive CSS complet

Voici le code CSS de cette version :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f5f5;
}

.menu {
  background-color: #333;
  color: #fff;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.menu .logo {
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 1px;
}

.menu-links {
  list-style: none;
  display: none;
  flex-direction: column;
  background-color: #333;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
}

.menu-links li {
  text-align: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-links a {
  color: #fff;
  text-decoration: none;
  display: block;
  font-size: 1.1em;
  transition: color 0.3s ease;
}

.menu-links a:hover {
  color: #00bcd4;
}

.menu-toggle {
  display: block;
  font-size: 1.8em;
  cursor: pointer;
}

/* État actif du menu (quand on clique sur le burger) */
.menu.active .menu-links {
  display: flex;
}

/* Version Desktop */
@media (min-width: 768px) {
  .menu {
    flex-direction: row;
  }

  .menu-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 25px;
    background: none;
    margin-left: 50px;
  }

  .menu-links li {
    border: none;
    padding: 0;
  }

  .menu-toggle {
    display: none;
  }
}

Ajout du JavaScript minimal

Pour permettre au menu de s’ouvrir et de se fermer au clic, il suffit d’un petit script JavaScript.
Voici le code à placer juste avant la fermeture de votre balise </body> :

<script>
  const menu = document.querySelector('.menu');
  const toggle = document.querySelector('.menu-toggle');

  toggle.addEventListener('click', () => {
    menu.classList.toggle('active');
  });
</script>

1. Le concept mobile first

Contrairement au premier exemple, ce design part du plus petit écran possible.
Le menu complet est masqué et remplacé par un simple bouton burger.
Cela réduit la complexité visuelle sur mobile et améliore la lisibilité.

2. Les media queries inversées

Ici, on utilise @media (min-width: 768px) pour agrandir la mise en page sur les écrans larges.
Ainsi, on n’a pas besoin d’écrire des corrections pour les mobiles : le design de base est celui du mobile.

3. L’ouverture et la fermeture animée

Grâce à la classe .active appliquée dynamiquement par le JavaScript, le menu s’affiche et se masque avec fluidité.
L’effet est simple, lisible et rapide à mettre en place.

4. Une palette sombre élégante

Le fond sombre (#333) associé à des liens blancs donne un style professionnel et contrasté.
L’effet “hover” bleu cyan apporte une touche de modernité sans surcharge visuelle.

Conseil bonus pour le SEO

Même si le JavaScript gère l’ouverture du menu, tous les liens du <ul> restent visibles dans le code source HTML.
Cela signifie que les robots des moteurs de recherche peuvent les lire et les indexer, ce qui préserve votre référencement naturel.
C’est une pratique essentielle à respecter lorsque vous rendez un menu dynamique.

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 ?

Avantage de cette méthode

Ce type de menu est idéal pour les sites vitrine, blogs ou applications web souhaitant offrir une navigation fluide sur mobile.
Il combine simplicité du code, compatibilité universelle et esthétique moderne.
De plus, il ne dépend d’aucune bibliothèque comme Bootstrap, ce qui garantit un chargement plus rapide de vos pages.

Exemple 3 : Menu avec animation et transition fluide

Nous allons maintenant aller un peu plus loin avec un design plus interactif.
L’objectif de ce troisième exemple est de créer un menu animé où les liens apparaissent avec un léger décalage et une transition douce.
Ce type de menu donne un effet professionnel et captivant tout en restant lisible.

Code CSS du menu animé et responsive

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8f9fa;
}

.menu {
  background-color: #111;
  color: #fff;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.menu .logo {
  font-size: 1.4em;
  font-weight: bold;
}

.menu-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.menu-links li {
  opacity: 0;
  transform: translateY(-10px);
  animation: slideIn 0.5s forwards;
}

.menu-links li:nth-child(1) { animation-delay: 0.2s; }
.menu-links li:nth-child(2) { animation-delay: 0.4s; }
.menu-links li:nth-child(3) { animation-delay: 0.6s; }
.menu-links li:nth-child(4) { animation-delay: 0.8s; }
.menu-links li:nth-child(5) { animation-delay: 1s; }

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-links a {
  color: #fff;
  text-decoration: none;
  position: relative;
}

.menu-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #00bcd4;
  transition: width 0.3s;
}

.menu-links a:hover::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .menu-links {
    display: none;
    flex-direction: column;
    background-color: #111;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
  }

  .menu.active .menu-links {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

Explication du design animé

Chaque élément de menu bénéficie d’un effet d’apparition progressif grâce à la propriété animation-delay.
Ainsi, lorsque la page se charge, les liens du menu apparaissent un à un, ce qui crée une impression de fluidité et de professionnalisme.

L’effet de soulignement animé sous chaque lien renforce l’interactivité sans surcharger le design.

Sur mobile, la structure reste responsive et se transforme comme dans les exemples précédents.

Exemple 4 : Menu latéral (sidebar) dépliant

Le menu latéral dépliant, aussi appelé sidebar menu, est souvent utilisé dans les applications web, les tableaux de bord (dashboards) ou encore les sites d’administration.
Ce type de menu reste discret et ne prend pas de place à l’écran, tout en offrant une navigation claire et structurée.

Objectif du design

Dans cet exemple, le menu sera caché sur le côté gauche de la page.
Lorsqu’on cliquera sur le bouton burger, il glissera depuis la gauche avec une belle transition fluide.
Ce style est particulièrement adapté aux sites avec de nombreuses rubriques.

Pour cette exemple, nous allons modifier notre HTML de base :

<nav class="menu">
  <div class="logo">MonSite</div>
  <div class="menu-toggle4">☰</div>
</nav>

<!-- Sidebar -->
<div class="sidebar">
  <a href="#">Accueil</a>
  <a href="#">Services</a>
  <a href="#">Portfolio</a>
  <a href="#">À propos</a>
  <a href="#">Contact</a>
</div>

<!-- Contenu principal -->
<div class="content">
  <h1>Bienvenue sur MonSite</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.</p>
</div>

Code CSS du menu latéral

Voici le code CSS complet de ce quatrième exemple :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f1f1f1;
  overflow-x: hidden;
}

.menu {
  background-color: #222;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.menu .logo {
  font-size: 1.5em;
  font-weight: bold;
}

.menu-toggle {
  font-size: 1.8em;
  cursor: pointer;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #111;
  padding-top: 70px;
  transition: left 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 1.1em;
  transition: background 0.3s;
}

.sidebar a:hover {
  background-color: #00bcd4;
}

.menu.active + .sidebar {
  left: 0;
}

/* Pour le contenu principal */
.content {
  margin-top: 70px;
  padding: 20px;
}

Ajout du JavaScript

Pour faire apparaître la sidebar, ajoutez ce script à la fin du body :

<script>
  const menuToggle = document.querySelector('.menu-toggle');
  const menuBar = document.querySelector('.menu');

  menuToggle.addEventListener('click', () => {
    menuBar.classList.toggle('active');
  });
</script>

Explication du fonctionnement

1. Le principe du décalage latéral
   Par défaut, la sidebar est placée en dehors de l’écran, grâce à left: -250px.
   Lorsqu’on clique sur le bouton burger, la classe .active est ajoutée à la barre de navigation, ce qui déplace la sidebar à gauche grâce à la règle .menu.active + .sidebar.
2. Une transition fluide et élégante
   L’animation repose sur la propriété transition: left 0.4s ease;.
   Elle donne un effet naturel d’apparition, qui améliore grandement l’expérience utilisateur.
3. Un positionnement fixe pour le header
   La barre supérieure reste toujours visible grâce à position: fixed;.
   Cela permet à l’utilisateur d’ouvrir le menu latéral à tout moment, même lorsqu’il a fait défiler la page.
4. Une compatibilité responsive
   Comme la sidebar prend toute la hauteur (height: 100%), elle fonctionne aussi bien sur mobile que sur desktop.
   Vous pouvez ajouter des media queries pour réduire sa largeur sur les très petits écrans.

Conseil UX

Ce type de menu est parfait pour les sites où la navigation comporte beaucoup de sections.
Cependant, il doit être utilisé avec parcimonie sur les sites vitrines, car il masque une partie du contenu lorsqu’il est ouvert.
L’idéal est de coupler ce type de menu à un overlay semi-transparent qui obscurcit légèrement le reste de la page pendant l’ouverture, pour guider visuellement l’utilisateur.

Exemple 5 : Menu fixe transparent avec effet de défilement

Pour ce cinquième et dernier exemple, nous allons créer un menu fixe transparent qui change de couleur lors du défilement de la page.
C’est un effet moderne très répandu sur les sites vitrines et les pages d’accueil élégantes.
Il permet de mettre en valeur une grande image de fond ou une vidéo d’introduction tout en conservant un accès rapide au menu.

Objectif du design

L’idée est d’avoir :

• Une barre de navigation transparente au chargement de la page.
• Lorsqu’on fait défiler la page, la barre devient opaque pour améliorer la lisibilité.
• Le menu reste toujours visible en haut grâce à position: fixed.

Code CSS du menu transparent fixe

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  height: 2000px;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: transparent;
  color: white;
  z-index: 999;
  transition: background-color 0.4s ease, padding 0.3s ease;
}

.menu.scrolled {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 10px 40px;
}

.menu .logo {
  font-size: 1.5em;
  font-weight: bold;
}

.menu .menu-links {
  display: flex;
  list-style: none;
  gap: 25px;
}

.menu .menu-links a {
  color: white;
  text-decoration: none;
  font-size: 1.1em;
  transition: color 0.3s;
}

.menu .menu-links a:hover {
  color: #00bcd4;
}

.menu-toggle {
  display: none; /* Caché par défaut sur grand écran */
  font-size: 1.5em;
  cursor: pointer;
}

/* Styles pour les écrans de moins de 768px (tablettes et mobiles) */
@media (max-width: 768px) {
  .menu .menu-links {
    display: none; /* Cache les liens du menu */
    position: absolute;
    top: 100%; /* Se positionne juste en dessous de la barre de nav */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  .menu .menu-links.active {
    display: flex; /* Affiche le menu quand il est actif */
  }

  .menu-toggle {
    display: block; /* Affiche l'icône hamburger */
  }

  .menu {
    padding: 15px 20px;
  }
  .menu.scrolled {
    padding: 10px 20px;
  }
}

Ajout du JavaScript pour l’effet de défilement

<script>
  const nav = document.querySelector('.menu');
  const menuToggle = document.querySelector('.menu-toggle');
  const menuLinks = document.querySelector('.menu-links');


  window.addEventListener('scroll', () => {
    if (window.scrollY > 80) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
  });

  menuToggle.addEventListener('click', () => {
    menuLinks.classList.toggle('active');
  });
</script>

Explication du fonctionnement

1. Une apparence épurée et élégante
   Au chargement, le menu est totalement transparent, ce qui laisse apparaître le fond de la section “hero”.
   Ce style donne immédiatement un aspect professionnel à votre site.
2. La détection du défilement
   Le script JavaScript surveille la position du défilement (window.scrollY).
   Dès que l’utilisateur descend un peu, la classe .scrolled s’active, ce qui change la couleur de fond et réduit la hauteur du menu.
3. Une transition fluide et naturelle
   Les transitions CSS (transition: background-color 0.4s ease) assurent un effet de fondu subtil entre les deux états du menu.
   Cela donne une sensation de douceur et de finition professionnelle.
4. SEO et accessibilité
   Ce menu reste toujours accessible à l’utilisateur sans gêner la lecture.
   Son code est léger, et tous les liens sont visibles par les moteurs de recherche.

Améliorations possibles

Vous pouvez aller plus loin en ajoutant :

• Une ombre portée lors du défilement (box-shadow: 0 2px 10px rgba(0,0,0,0.3)),
• Une transition sur la couleur du texte,
• Ou encore un effet de surbrillance lorsque l’utilisateur survole une section du site.

Créer un menu responsive en CSS n’a rien de compliqué lorsqu’on comprend la logique qui se cache derrière les flexbox, les media queries et quelques transitions bien choisies.
À travers ces cinq exemples, vous avez vu comment une même base HTML peut se transformer en une multitude de designs différents, chacun adapté à un type de site précis.

Le menu horizontal fluide reste une base sûre et classique.
Le menu burger mobile first offre une navigation intuitive sur smartphone.
Le menu animé ajoute une touche moderne et dynamique à vos projets.
Le menu latéral dépliant convient parfaitement aux interfaces riches.
Et enfin, le menu transparent fixe apporte une élégance rare, idéale pour les sites à fort impact visuel.

Chaque version a ses avantages, mais toutes partagent un point commun : elles améliorent l’expérience utilisateur et renforcent la crédibilité visuelle de votre site.
En prenant le temps de bien structurer votre code et d’utiliser le CSS de façon réfléchie, vous pourrez créer des menus esthétiques, performants et totalement adaptés à tous les écrans.

N’hésitez pas à expérimenter, à modifier les couleurs, les transitions ou les polices. Le web design est un terrain de jeu infini, et chaque petit ajustement peut transformer complètement l’identité visuelle de votre site.

Le responsive design n’est pas qu’une question de technique : c’est avant tout une question d’ergonomie et d’émotion. Un bon menu, bien pensé, guide vos visiteurs sans qu’ils aient à y réfléchir. Et c’est là toute la force d’un design réussi.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr