Menu déroulant CSS
Utilisez CSS pour créer un effet de menu déroulant qui apparaît lorsque la souris le survole.
Exemple de menu déroulant
Exemple démo 1
Exemple
www.example.com
Exemple démo 2
Exemple démo 3
Menu déroulant de base
Lorsque la souris survole l'élément spécifié, un menu déroulant apparaîtra.
Exemple
Essayez-le vous-même »
Analyse de l'exemple
Section HTML :
Nous pouvons utiliser n'importe quel élément HTML pour ouvrir le menu déroulant, comme un <span>, ou un élément <button>.
Utilisez un élément conteneur (tel que <div>) pour créer le contenu du menu déroulant et placez-le où vous voulez.
Utilisez un élément <div> pour envelopper ces éléments, et utilisez CSS pour styliser le contenu du menu déroulant.
Section CSS :
.dropdownUtilisation des classesposition:relative, cela fera en sorte que le contenu du menu déroulant soit placé sous le bouton du menu déroulant (en utilisantposition:absolutela position en bas à droite de ).
.dropdown-contentclass est le menu déroulant réel. Il est masqué par défaut et s'affichera lorsque la souris survole l'élément spécifié. Remarquemin-widthDéfinissez la valeur sur 160px. Vous pouvez la modifier librement.Remarque :Si vous souhaitez que le contenu déroulant ait la même largeur que le bouton déroulant, vous pouvez définirwidthà 100% (overflow:autodéfini pour permettre le défilement sur les petits écrans).
Nous utilisonsbox-shadowL'attribut donne au menu déroulant l'apparence d'une "carte".
:hoverLe sélecteur est utilisé pour afficher le menu déroulant lorsque l'utilisateur passe la souris sur le bouton déroulant.
menu déroulant
Créez un menu déroulant qui permet aux utilisateurs de sélectionner un élément dans la liste :
Cet exemple est similaire au précédent, dans lequel nous avons ajouté des liens à la liste déroulante et défini des styles :
Exemple
/* Styles du bouton déroulant */
.dropbtn {
background-color: #4C7EAF;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Conteneur <div> - doit positionner le contenu du menu déroulant */
.dropdown {
position: relative;
display: inline-block;
}
/* Contenu du menu déroulant (masqué par défaut) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Liens du menu déroulant */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Changer la couleur du lien du menu déroulant au survol */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Afficher le menu déroulant au survol de la souris */
.dropdown:hover .dropdown-content {
display: block;
}
/* Lorsque le contenu du menu déroulant est affiché, changez la couleur d'arrière-plan du bouton déroulant */
.dropdown:hover .dropbtn {
background-color: #4877A6;
}
</style>
<div class="dropdown">
<button class="dropbtn">menu déroulant</button>
<div class="dropdown-content">
<a href="#">Exemple 1</a>
<a href="#">Exemple 2</a>
<a href="#">Exemple 3</a>
</div>
</div>
Essayez-le vous-même »
Alignement du contenu du menu déroulant
float:left;
float:right;
Si vous souhaitez que le contenu d'un menu déroulant flottant à droite soit aligné de droite à gauche au lieu de gauche à droite, vous pouvez ajouter le code suivant :right: 0;
Plus d’exemples
Menu déroulant d'images
Cet exemple montre comment ajouter des images à un menu déroulant.
Menu déroulant de la barre de navigation
Cet exemple montre comment ajouter un menu déroulant à la barre de navigation.