Création d'un menu déroulant à plusieurs niveaux

Dans cet article, je vais vous montrer comment créer un menu déroulant à plusieurs niveaux en utilisant HTML, CSS et JavaScript. Nous verrons étape par étape comment rendre un tel menu pratique et moderne. Même si vous êtes débutant, vous pourrez suivre ces instructions et créer votre propre menu déroulant. Allons-y !

Qu'est-ce qu'un menu déroulant à plusieurs niveaux ?

Un menu déroulant est un élément d'interface qui permet à l'utilisateur de naviguer rapidement sur le site. Le menu à plusieurs niveaux comporte des sous-menus qui peuvent être imbriqués les uns dans les autres. Ces menus se trouvent souvent sur les grands sites où il existe de nombreuses catégories et sous-catégories. Un exemple d'un tel menu peut être vu sur les sites de boutiques en ligne ou de portails d'entreprise.

Structure HTML pour le menu déroulant

Pour créer un menu déroulant à plusieurs niveaux, commençons par le code HTML. Créons une structure de menu de base en utilisant les éléments <ul> et <li> pour la liste et les sous-éléments :

<nav class="menu">
  <ul>
    <li><a href="# ">Accueil</a></li>
    <li><a href="# ">Services</a>
      <ul class="submenu">
        <li><a href="# ">Développement Web</a></li>
        <li><a href="# ">Applications mobiles</a>
          <ul class="submenu">
            <li><a href="#">iOS</a></li>
            <li><a href="#">Android</a></li>
          </ul>
        </li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="# ">Contacts</a></li>
  </ul>
</nav>

Ici, nous utilisons des listes imbriquées <ul> pour créer des éléments de menu à plusieurs niveaux. Chaque <li> peut contenir un lien (<a>) et une liste imbriquée (<ul>) pour former un sous-menu.

Stylisation du menu à l'aide de CSS

Maintenant, ajoutons des styles pour que notre menu soit beau et ait une fonctionnalité déroulante. CSS vous aidera à masquer les sous-menus et à les afficher lorsque vous survolez l'élément parent.

/* Основные стили для меню */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > ul > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
}

/* Скрываем подменю по умолчанию */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Показываем подменю при наведении на родительский элемент */
.menu li:hover > .submenu {
  display: block;
}

/* Стили для элементов подменю */
.submenu li {
  position: relative;
  margin: 0;
}

.submenu .submenu {
  top: 0;
  left: 100%;
}

Ajout d'interactivité avec JavaScript

Afin de rendre le menu pratique sur les appareils mobiles, ajoutons un peu de JavaScript. Avec JavaScript, nous pouvons contrôler l'affichage du sous-menu lorsqu'il est cliqué.

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu li');

  menuItems.forEach(item => {
    const submenu = item.querySelector('.submenu');
    if (submenu) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        submenu.classList.toggle('show');
      });
    }
  });

  document.addEventListener('click', function() {
    document.querySelectorAll('.submenu').forEach(submenu => {
      submenu.classList.remove('show');
    });
  });
});

Dans ce code, nous ajoutons un gestionnaire d'événements à chaque élément de menu avec un sous-menu. La classe show est ajoutée et supprimée pour afficher et masquer les sous-menus. Nous ajoutons également un gestionnaire à l'ensemble du document pour masquer les sous-menus lorsque vous cliquez ailleurs sur la page.

Conclusion

Créer un menu déroulant à plusieurs niveaux n'est pas aussi difficile qu'il y paraît. L'essentiel est de comprendre la structure HTML et d'apprendre à gérer la visibilité des éléments à l'aide de CSS et JavaScript. Le menu déroulant aide l'utilisateur à trouver facilement les informations dont il a besoin et rend le site plus facile à utiliser.

Essayez de créer votre propre menu déroulant en utilisant cet exemple. Et si vous voulez apprendre à faire des interfaces encore plus complexes, je vous recommande d'essayer l'application Code. Vous y trouverez des cours sur HTML, CSS et JavaScript qui vous aideront à maîtriser rapidement le développement Web et à créer des projets encore plus intéressants !