CSS Dropdowns

Dropdowns CSS

Les dropdowns CSS sont utilisés pour afficher une liste d'options ou de contenu lorsqu'un utilisateur clique ou survole un élément, comme un bouton ou un lien de navigation.

Un dropdown CSS se compose d'un élément déclencheur (comme <div>, <button>, <p>, <a>, etc.).

Lorsque l'élément déclencheur est cliqué ou survolé, le contenu du dropdown s'affiche.

Le contenu du dropdown est un élément conteneur (par exemple <div>) qui contient le contenu caché (qui peut être du texte, des liens, des images, etc.).

Survolez les trois exemples de dropdowns CSS ci-dessous :

Texte du Dropdown
Autre : Cinque Terre

Boîte Dropdown CSS avec Texte

Ici, nous créons une boîte dropdown avec du texte qui apparaît lorsque l'utilisateur survole un élément <div>.

Exemple

<style>
.dropdown {
position: relative;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>

<div class="dropdown">Survolez-moi !
<div class="dropdown-content">Bonjour le monde !</div>
</div>
Essayez-le vous-même »

Exemple expliqué

  • La classe .dropdown utilise position:relative , ce qui est nécessaire lorsque nous voulons que le contenu du dropdown soit placé juste en dessous de l'élément déclencheur (le contenu du dropdown utilisera position:absolute ).
  • La classe .dropdown-content contient le contenu du dropdown. Il est caché par défaut et sera affiché au survol.
  • La propriété min-width est définie sur 130px. N'hésitez pas à changer cela ! Si vous souhaitez que la largeur du contenu du dropdown soit aussi large que l'élément déclencheur, définissez width à 100 % et overflow:auto pour activer le défilement sur les petits écrans.
  • Au lieu d'utiliser une bordure, nous utilisons la propriété box-shadow pour donner au contenu du dropdown l'apparence d'une "carte".
  • Le sélecteur :hover est utilisé pour afficher le contenu du dropdown lorsque l'utilisateur survole l'élément <div class="dropdown">.

Menu Dropdown CSS

Créez un menu dropdown qui permet à l'utilisateur de choisir une option dans une liste :

Cet exemple est similaire au précédent, sauf que nous ajoutons un bouton et des liens à l'intérieur de la boîte dropdown et les stylisons pour les adapter au bouton dropdown :

Exemple

<style>
.dropdown {
position: relative;
}

/* Styliser le bouton dropdown */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* Contenu du dropdown */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Liens à l'intérieur du contenu du dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Changer la couleur des liens du dropdown au survol */
.dropdown-content a:hover {
background-color: #f1f1f1
}

/* Afficher le contenu du dropdown au survol */
.dropdown:hover .dropdown-content {
display: block;
}

/* Changer la couleur de fond du bouton dropdown au survol */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>

<div class="dropdown">
<button class="dropbtn">Menu Dropdown</button>
<div class="dropdown-content">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</div>
</div>
Essayez-le vous-même »

Dropdown CSS Aligné à Droite

Si vous souhaitez que le menu dropdown aille de droite à gauche, au lieu de gauche à droite, ajoutez right: 0;

Exemple

.dropdown-content {
right: 0;
}
Essayez-le vous-même »

Image Dropdown CSS

Comment ajouter une image et d'autres contenus à l'intérieur de la boîte dropdown.

Exemple

Survolez l'image :

Cinque Terre

Essayez-le vous-même »

Navbar Dropdown CSS

Comment ajouter un menu dropdown à l'intérieur d'une barre de navigation.

Exemple

Essayez-le vous-même »