Comment créer : des menus déroulants cliquables

Apprenez à créer des menus déroulants cliquables en utilisant CSS et JavaScript.

Créer un menu déroulant cliquable

Créer un menu déroulant qui apparaît lorsque l'utilisateur clique sur le bouton.

Étape 1 - Ajouter HTML :

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Lien 1</a>
    <a href="#">Lien 2</a>
    <a href="#">Lien 3</a>
  </div>
</div>

Explication de l'exemple :

Vous pouvez utiliser n'importe quel élément pour ouvrir la liste déroulante, par exemple des éléments <button>, <a> ou <p>.

Utilisez un élément conteneur (comme <div>) pour créer la liste déroulante et ajoutez-y des liens de liste déroulante.

Utilisez l'élément <div> pour envelopper le bouton et <div> afin de positionner correctement la liste déroulante avec CSS.

Deuxième étape - Ajouter CSS :

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 鼠标悬停和聚焦时的下拉菜单按钮 */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* 容器 <div> - 用于定位下拉菜单内容所需的元素 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉菜单内容（默认隐藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉菜单内的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠标悬停时更改下拉菜单链接的颜色 */
.dropdown-content a:hover {background-color: #ddd;}
/* Afficher le menu déroulant (quand l'utilisateur clique sur le bouton du menu déroulant, utilisez JS pour ajouter ce classe au conteneur .dropdown-content) */
.show {display:block;}

Explication de l'exemple :

Nous avons défini des styles pour le bouton du menu déroulant, tels que la couleur de fond, les marges internes, l'effet au survol, etc.

.dropdown La classe utilise position:relativelorsque nous voulons placer le contenu du menu déroulant sous le bouton du menu déroulant (en utilisant position:absolute), c'est nécessaire.

.dropdown-content La classe contient le menu déroulant réel. Elle est par défaut masquée et s'affichera au survol de la souris (voir ci-dessous). Notez que la largeur minimale est de 160px. Vous pouvez modifier cette valeur selon vos besoins. Astuce : si vous souhaitez que la largeur du contenu du menu déroulant soit égale à celle du bouton du menu déroulant, vous pouvez définir la largeur sur 100% (et utiliser sur les petits écrans overflow:auto pour activer le défilement).

Nous n'utilisons pas de bordure, mais box-shadow de la propriété, afin que le menu déroulant semble comme une "carte"Nous utilisons également z-index Placez le menu déroulant devant d'autres éléments.

Étape 3 - Ajouter JavaScript :

/* Changer l'état de masquage/affichage du contenu du menu déroulant lorsque l'utilisateur clique sur le bouton */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Si l'utilisateur clique en dehors du menu déroulant, fermez le menu déroulant
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Essayer personnellement

Pages associées

Tutoriel :Menu déroulant CSS

Tutoriel :Comment créer un menu déroulant avec survol