Listes déroulantes CSS
Créez une liste déroulante survolable avec CSS.
Démo : Exemples de listes déroulantes
Déplacez la souris sur les exemples ci-dessous :
Liste déroulante de base
Créez une liste déroulante qui apparaît lorsque l'utilisateur déplace la souris sur un élément.
Exemple
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px;
z-index: 1;
}
.dropdown:hover
.dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Exemple expliqué
HTML) Utilisez n'importe quel élément pour ouvrir le contenu de la liste déroulante, par exemple un élément <span> ou un élément <button>.
Utilisez un élément conteneur (comme <div>) pour créer le contenu de la liste déroulante et ajoutez ce que vous voulez à l'intérieur.
Enveloppez un élément <div> autour des éléments pour positionner correctement le contenu de la liste déroulante avec CSS.
CSS) La .dropdownclasse utilise position:relative, qui est nécessaire lorsque nous voulons que le contenu déroulant soit placé juste en dessous du bouton déroulant (en utilisant position:absolute).
La .dropdown-contentclasse contient le contenu réel de la liste déroulante. Il est caché par défaut, et sera affiché au survol (voir ci-dessous). Notez que le min-widthest défini sur 160px. N'hésitez pas à changer cela. Conseil : Si vous souhaitez que la largeur du contenu de la liste déroulante soit aussi large que le bouton de la liste déroulante, définissez le widthsur 100 % (et overflow:autopour activer le défilement sur les petits écrans).
Au lieu d'utiliser une bordure, nous avons utilisé la box-shadowpropriété CSS pour faire ressembler le menu déroulant à une "carte".
Le :hoversélecteur est utilisé pour afficher le menu déroulant lorsque l'utilisateur déplace la souris sur le bouton déroulant.
Menu déroulant
Créez un menu déroulant qui permet à l'utilisateur de choisir une option dans une liste :
Cet exemple est similaire au précédent, sauf que nous ajoutons des liens à l'intérieur de la liste déroulante et que nous les stylisons pour qu'ils correspondent à un bouton déroulant stylé :
Exemple
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* 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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Contenu déroulant aligné à droite
Si vous voulez que le menu déroulant aille de droite à gauche, au lieu de gauche à droite, ajoutezright: 0;
Exemple
.dropdown-content {
right: 0;
}
Plus d'exemples
Image déroulante
Comment ajouter une image et d'autres contenus dans la liste déroulante.
Survolez l'image :
Barre de navigation déroulante
Comment ajouter un menu déroulant dans une barre de navigation.