Comment - Méga Menu
Apprenez à créer un méga menu (menu déroulant pleine largeur dans une barre de navigation).
Méga Menu
Créer un méga menu
Créez un menu déroulant qui apparaît lorsque l'utilisateur déplace la souris sur un élément à l'intérieur d'une barre de navigation.
Étape 1) Ajoutez du HTML :
Exemple
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega
Menu</h2>
</div>
<div class="row">
<div
class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
Exemple expliqué
Utilisez n'importe quel élément pour ouvrir le menu déroulant, par exemple un élément <button>, <a> ou <p>.
Utilisez un élément conteneur (comme <div class="dropdown-content">) pour créer le menu déroulant et ajouter une grille (colonnes) et ajouter des liens déroulants à l'intérieur de la grille.
Enveloppez un élément <div class="dropdown"> autour du bouton et de l'élément conteneur (<div class="dropdown-content"> pour positionner correctement le menu déroulant avec CSS.
Étape 2) Ajoutez CSS :
Exemple
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
/* Important for vertical align on mobile phones */
margin: 0; /*
Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content
.header {
background: red;
padding: 16px;
color: white;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links
inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background
color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Exemple expliqué
Nous avons stylisé la barre de navigation et les liens de la barre de navigation avec une couleur d'arrière-plan, un rembourrage, etc.
Nous avons stylisé le bouton déroulant avec une couleur d'arrière-plan, un rembourrage, etc.
La .dropdown-content
classe contient le menu déroulant réel. Il est caché par défaut, et sera affiché au survol (voir ci-dessous). Il est positionné pour être visible juste en dessous du bouton déroulant et la largeur est définie sur 100 % pour couvrir tout l'écran.
Au lieu d'utiliser une bordure, nous avons utilisé la box-shadow
propriété pour faire ressembler le menu déroulant à une "carte". Nous utilisons également z-index pour placer la liste déroulante devant d'autres éléments.
Le :hover
sélecteur est utilisé pour afficher le menu déroulant lorsque l'utilisateur déplace la souris sur le bouton déroulant.
Les .column
classes sont utilisées pour créer trois colonnes qui flottent les unes à côté des autres dans le menu déroulant (pour afficher différentes catégories).
Méga menu réactif
Exemple
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height:
auto;
}
}
Conseil : accédez à notre didacticiel CSS Dropdowns pour en savoir plus sur les listes déroulantes.
Conseil : Accédez à nos listes déroulantes cliquables pour en savoir plus sur les listes déroulantes cliquables
Conseil : accédez à notre didacticiel CSS Navbar pour en savoir plus sur les barres de navigation.
Conseil : accédez à notre navigation supérieure réactive pour savoir comment créer une barre de navigation réactive.