🍔 Menus Responsives : Du Hamburger aux Menus Déroulants Épiques (Version Avancée)

Bonjour, cher explorateur du web ! 🕵️‍♀️💻
Aujourd’hui, nous allons parler des menus… mais pas des menus ordinaires ! Nous allons créer des menus épiques qui ont fière allure sur mobile et desktop, s’ouvrent au survol, incluent des animations et des effets JS supplémentaires. ✨

Prépare-toi, car ton icône hamburger va dépasser le simple bouton ouvrir-fermer. 🍔➡️🎉

1️⃣ Les Bases du Menu Hamburger 🍔

Structure HTML

Le sauveur mobile, le favori du minimaliste : le menu hamburger.
Voici la structure HTML de base :

&lt;nav>
  &lt;div class="hamburger" id="hamburger">
    &amp;#9776; &lt;!-- Icône à trois lignes -->
  &lt;/div>
  &lt;ul class="menu" id="menu">
    &lt;li>&lt;a href="#">Accueil&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#">À propos&lt;/a>&lt;/li>
    &lt;li>
      &lt;a href="#">Services&lt;/a>
      &lt;ul class="submenu">
        &lt;li>&lt;a href="#">Conception Web&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">SEO&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">Marketing Digital&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/li>
    &lt;li>&lt;a href="#">Contact&lt;/a>&lt;/li>
  &lt;/ul>
&lt;/nav>

💡 Astuce : Regrouper les sous-menus dans <ul class="submenu"> pour garder le HTML propre et faciliter l’ajout d’animations.

CSS : Styles Initiaux 🎨

/* Styles généraux de navigation */
nav {
  background-color: #222;
  color: white;
  padding: 10px 20px;
  position: relative;
  font-family: Arial, sans-serif;
}

/* Icône hamburger */
.hamburger {
  font-size: 30px;
  cursor: pointer;
  display: none; /* Masquer sur desktop, afficher sur mobile */
}

/* Style du menu */
.menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.menu li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
}

.menu li a:hover {
  color: #ff6347;
  transform: scale(1.1);
}

/* Cacher les sous-menus */
.submenu {
  display: none;
  position: absolute;
  background-color: #444;
  list-style: none;
  padding: 10px 0;
  top: 100%;
  left: 0;
  border-radius: 5px;
  min-width: 180px;
}

.submenu li a {
  padding: 10px 20px;
  display: block;
}

/* Ouverture des sous-menus au survol */
.menu li:hover .submenu {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivité mobile */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #333;
    width: 100%;
    padding: 10px 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  }
  .menu li {
    padding: 10px 20px;
  }
}

💡 Astuce : L’utilisation de max-height et transition crée des animations douces pour l’ouverture et la fermeture des menus mobiles.

2️⃣ Effet JS pour le Menu Hamburger 🕹️

Maintenant, faisons en sorte que le menu s’ouvre et se ferme au clic :

const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');

hamburger.addEventListener('click', () => {
  if(menu.style.maxHeight &amp;&amp; menu.style.maxHeight !== "0px"){
    menu.style.maxHeight = "0px";
  } else {
    menu.style.maxHeight = menu.scrollHeight + "px";
  }
});

💡 Astuce : scrollHeight ajuste automatiquement la hauteur du menu en fonction de son contenu. Aucun code supplémentaire nécessaire si tu ajoutes plus d’éléments.

3️⃣ Sous-menus Déroulants Animés ✨

Les sous-menus activés au survol rendent le menu interactif et épique.

.submenu {
  display: block; /* Peut être ouvert uniquement via hover CSS */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}

.menu li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

💡 Astuce : Combiner opacity + translate rend les sous-menus fluides et professionnels.

4️⃣ Effets JS Supplémentaires 🎢

Ouverture/fermeture animée : Glissement doux avec max-height
Délai sur sous-menu : Ajoute un petit délai au survol pour un effet plus vivant

const submenuItems = document.querySelectorAll('.submenu li');

submenuItems.forEach((item, index) => {
  item.style.transitionDelay = `${index * 0.05}s`;
});

💡 Les petits délais (0,05s–0,1s) rendent le menu plus vivant et “professionnel”.

5️⃣ Astuces Pratiques 💖

Fixer la largeur des sous-menus pour éviter le chevauchement sur responsive.
Ne pas oublier le contraste au survol ; sur écran tactile, utiliser le clic au lieu du hover.
Combiner animations CSS + toggle JS pour une interaction fluide.
Animer l’icône hamburger pour qu’elle se transforme en X lorsqu’on clique :

.hamburger.active::after {
  content: "✖";
  color: #ff6347;
}

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
});

🎯 Ce petit détail montre aux utilisateurs si le menu est ouvert ou fermé.

6️⃣ Résumé 🎨

Menu hamburger = mobile-friendly 🍔
Hover + CSS rend les sous-menus épiques ✨
JS ajoute toggle et effets d’animation 🕹️
Delays + transitions rendent le menu vivant 🌟
Design responsive = parfait sur tous les appareils 📱💻

🎉 Et voilà ! Du simple menu hamburger aux menus déroulants épiques, ta page dispose maintenant d’un système de navigation élégant, amusant et interactif. 🍔➡️🎯