Créer une liste déroulante hoverable avec CSS.
Demo: Exemples déroulantes
Déplacez la souris sur les exemples ci-dessous:
Dropdown Basic
Créer une zone de 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> Essayez - le vous - même » Exemple Explained
HTML) Utiliser tout élément pour ouvrir le contenu de la liste déroulante, par exemple un <span> , ou <button> élément.
Utilisez un élément conteneur (comme <div> ) pour créer le contenu de la liste déroulante et ajouter tout ce que vous voulez à l' intérieur de celui - ci.
Enrouler un <div> élément autour des éléments pour positionner le contenu déroulant correctement avec CSS.
CSS) Le .dropdown utilisation de classe position:relative , qui est nécessaire quand nous voulons que le contenu de la liste déroulante pour être placé juste en dessous le bouton déroulant ( en utilisant position:absolute ).
Le .dropdown-content classe contient le contenu de la liste déroulante réelle. Il est caché par défaut, et sera affiché sur le vol stationnaire (voir ci-dessous). Notez que le min-width est réglé sur 160px. Sentez - vous libre de changer cette Astuce:. Si vous voulez que la largeur du contenu déroulant pour être aussi large que le bouton déroulant, définissez la width à 100% (et overflow:auto pour activer défilement sur les petits écrans).
Au lieu d'utiliser une frontière, nous avons utilisé le CSS3 box-shadow propriété pour faire le menu déroulant ressembler à une "carte".
Le :hover sé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éer un menu déroulant qui permet à l'utilisateur de choisir une option dans une liste:
Cet exemple est similaire à la précédente, sauf que nous ajoutons des liens dans la zone de liste déroulante et le style pour les adapter à un bouton déroulant de style:
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);
}
/* 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> Essayez - le vous - même » Contenu Dropdown aligné à droite
Si vous voulez que le menu déroulant pour aller de droite à gauche, au lieu de gauche à droite, ajouter right: 0;
Autres exemples
image dropdown
Cet exemple montre comment ajouter une image et d'autres contenus dans la zone de liste déroulante.
dropdown Navbar
Cet exemple montre comment ajouter un menu déroulant dans une barre de navigation.