Comment - Bouton Plus dans la barre de navigation
Apprenez à créer un bouton "plus".
Bouton "Plus" dans la barre de navigation
Créer une barre de navigation déroulante
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">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</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>) pour créer le menu déroulant et ajoutez les liens déroulants à l'intérieur.
Enveloppez un élément <div> autour du bouton et du <div> 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-family:
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;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
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
classe est le conteneur de
.dropdown-content
. Puisqu'il s'agit d'un élément <div> et non d'un élément <a>, nous devons le faire flotter pour nous assurer qu'il reste à côté des liens.
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). Notez que le min-width
est défini sur 160px. N'hésitez pas à changer cela.
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.
Pages connexes
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.