Créer une liste déroulante CSS

Créer une liste déroulante en utilisant uniquement du CSS peut sembler complexe au premier abord, mais c’est en fait assez réalisable grâce aux pseudo-classes et aux propriétés CSS appropriées. Voici comment procéder :

HTML :

html
html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liste déroulante en CSStitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>
  <div class="dropdown">
    <button class="dropbtn">Optionsbutton>
    <div class="dropdown-content">
      <a href="#">Option 1a>
      <a href="#">Option 2a>
      <a href="#">Option 3a>
    div>
  div>
body>
html>

CSS (styles.css) :

css
/* Style de base pour le bouton et le contenu de la liste déroulante */
.dropbtn {
  background-color: #3498db;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

/* Afficher le contenu de la liste déroulante au survol du bouton */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Style des liens dans la liste déroulante */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

Ce code crée une liste déroulante simple avec trois options. Lorsque vous survolez le bouton « Options », le contenu de la liste déroulante apparaît. Les liens dans la liste déroulante ont un style de base ainsi qu’un effet de survol pour les mettre en évidence au survol de la souris. Tout cela est réalisé en utilisant uniquement du HTML et du CSS, sans JavaScript.

Plus de connaissances

Bien sûr, plongeons plus en profondeur dans la création d’une liste déroulante en utilisant uniquement du CSS.

Structure HTML :
Dans l’exemple donné précédemment, nous utilisons une structure HTML simple pour notre liste déroulante. Le conteneur principal est une div avec la classe .dropdown. À l’intérieur de cette div, nous avons un bouton avec la classe .dropbtn qui servira de déclencheur pour afficher la liste déroulante. Ensuite, nous avons un autre élément div avec la classe .dropdown-content qui contient les options de la liste déroulante, dans ce cas des liens ().

Styles de base :

Le style de base du bouton (dropbtn) définit son apparence générale, y compris la couleur de fond, la couleur du texte, la taille de la police et le curseur au survol.

Le conteneur principal (dropdown) est positionné relativement pour permettre le positionnement absolu de la liste déroulante.

Le contenu de la liste déroulante (dropdown-content) est initialement caché (display: none) et positionné absolument par rapport à son conteneur principal. Il a également une largeur minimale pour s’adapter au contenu et une ombre pour lui donner une apparence de profondeur.

Les liens () à l’intérieur de la liste déroulante ont des styles de base, y compris la couleur du texte et le rembourrage.

Affichage de la liste déroulante :

Lorsque vous survolez le bouton (dropbtn), la pseudo-classe :hover est activée et le contenu de la liste déroulante (dropdown-content) devient visible (display: block). Cela permet à l’utilisateur de voir les options lorsque le curseur est sur le bouton.
Les liens dans la liste déroulante ont également un style spécial lorsque survolés (:hover), ce qui les rend plus visibles.

Accessibilité :

Il est important de noter que cette implémentation de liste déroulante est accessible, car elle est construite à l’aide d’éléments HTML sémantiques (bouton et liens). Cela signifie que les utilisateurs qui naviguent avec un lecteur d’écran pourront comprendre et utiliser la liste déroulante correctement.

Adaptabilité :

Cette liste déroulante est également responsive, c’est-à-dire qu’elle s’ajuste automatiquement à différentes tailles d’écrans grâce à l’utilisation de valeurs relatives pour les propriétés CSS telles que la largeur, le rembourrage et la taille de la police.

En utilisant uniquement du CSS, cette implémentation fournit une solution légère et efficace pour créer une liste déroulante basique. Il est important de noter que pour des fonctionnalités plus avancées, telles que la manipulation dynamique des options ou la gestion des sélections, JavaScript serait nécessaire. Cependant, pour de nombreux cas d’utilisation simples, cette approche pure CSS peut être tout à fait appropriée.