Dans ce tuto, nous allons apprendre à créer un méga-menu en HTML/CSS, aussi appelé « menu dropdown ».

Attention, contrairement à un menu déroulant, dont les onglets ne contiennent qu’une seule colonne de liens, chaque onglet d’un méga-menu peut contenir tout un tas de données, dont plusieurs colonnes de liens, des textes, des images, etc.

Ce tutoriel considère que vous maîtrisez les fondamentaux du HTML ainsi que les bases du CSS, y compris les pseudo-sélecteurs.

Notre menu sera constitué de trois niveaux :

  1. La liste des onglets,
  2. Les colonnes dans les onglets,
  3. Les liens dans les colonnes des onglets.

Les noms des classes CSS utilisées dans ce cours sont inventées de toutes pièces. Vous pouvez en utiliser d’autre.

Les balises HTML quant à elles sont à respecter si vous voulez avec une architecture sémantique propre.

 

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Première étape : construction des onglets

Dans un premier temps, nous allons travailler sur la base de notre menu : la barre des onglets. Nous allons construire le niveau 1.

En termes de HTML, il suffit d’une balise sémantique <nav>, d’une liste <ul> avec d’un ou plusieurs <li>. Chaque élément <li> comportera un lien <a>.

<nav class="mega-menu">
	<ul class="mega-menu-main">
		<!-- Début d'un onglet -->
		<li class="lvl-0">
			<a href="#">Lien 1</a>
		</li>
		<!-- Fin d'un onglet -->
	</ul>
</nav>

Décomposons le HTML balise par balise et voyons le CSS minimum à ajouter.

Nous commençons par le conteneur du menu, la balise <nav> avec une classe mega-menu.

À l’intérieur, la liste <ul> principale, celle qui va contenir les onglets. C’est pour cela qu’elle porte la classe mega-menu-main.
Dès à présent, nous pouvons supprimer tous les effets de base d’une liste.
Puis, on va utiliser un peu de flex pour aligner les onglets côte à côte. Pensez à indiquer un attribut relative, nous verrons l’utilité dans la prochaine partie.

ul {
	margin: 0;
	padding: 0;
}
.mega-menu-main {
	display: flex;
	position: relative;
}

Cette liste va contenir des éléments <li>, et pas n’importe lesquels : ceux du premier niveau. C’est pourquoi nous allons leur ajouter la classe lvl-0. Bien entendu, on peut rajouter autant d’onglets qu’on le souhaite en dupliquant les balises <li class="lvl-0">.

Ces éléments contiennent des liens de type <a>, qui seront les titres des onglets.
Afin de sécuriser la mise en page de la suite du projet, nous allons modifier le CSS de tous les liens du méga-menu.

.mega-menu a {
	display: block;
	color: white;
	text-decoration: none;
}

Voici un exemple complet de la barre d’onglets.

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

 

Seconde étape : construire le contenu des onglets

Cette étape n’est pas très compliquée, mais technique.

Dans les éléments <li class="lvl-0">, à côté du lien, nous allons pouvoir ajouter le second niveau. Il est composé d’un <ul class="mega-menu-tab"> qui représentera le contenu de l’onglet. À l’intérieur de celui-ci, nous aurons des colonnes, représentées par des <li class="lvl-1">.

C’est là que c’est un peu technique. Le contenu des onglets, nommé par la classe mega-menu-tab devra se trouver sous la barre principale, mais hors du flux de balises. Sinon, à chaque fois que vous ouvrez un onglet, tout le contenu de votre site va descendre, ce qui n’est visuellement pas terrible. Nous allons donc les positionner avec du position: absolute;.

Quant au conteneur avec position: relative;, si vous choisissez le <li> parent, vous allez avoir de mauvaises surprises : l’onglet et son contenu seront déformés à chaque ouverture. Pour que le contenu de l’onglet fasse la largeur du menu sans provoquer de bug, c’est l’élément principal .mega-menu-main qui contiendra le position: relative;.

Enfin, pour afficher l’onglet au survol, il suffira de jouer avec le pseudo-sélecteur :hover.

Découvrez le code complet sur Codepen dès maintenant.

Dans l’exemple, le troisième niveau, c’est-à-dire le lien dans les colonnes, sont aussi représentés par un <ul> et des <li>. À ce stade, vous pouvez faire comme vous le souhaitez avec la mise en page qui intéresse, aucune limite n’existe, si ce n’est pas la taille de l’écran !

 

Troisième étape : passer au responsive

Rendre le menu responsive est plutôt simple.

Dans un premier temps, il est bon de l’ouvrir avec un bouton dans comme un menu burger. Pour ce faire, vous veuillez vous référencer à notre article : Comment faire un menu burger en HTML/CSS ?

En second temps, il vous suffit d’utiliser des média queries pour afficher et restructurer le menu afin qu’il soit adapté pour tablette mobile. Pour ouvrir les sous-menus, la bonne pratique consiste à utiliser du JavaScript. Nous verrons cela dans un autre tutoriel.

Exemple complet ici.

 

Notre astuce pour créer un mega menu responsive

Vous savez maintenant comment réaliser un méga-menu responsive en HTML/CSS basique.

Sachez qu’il est possible de le rendre plus ergonomique et que vous pouvez ajouter de jolis effets d’ouverture avec du Javascript.

Si vous avez besoin d’aide pour construire votre méga-menu, ou encore pour l’améliorer, vous pouvez déposer une annonce sur Codeur.com pour obtenir des devis de la part de développeurs web expérimentés qui sauront vous accompagner dans votre projet.