Comment activer les listes déroulantes Bootstrap en survol ?

Activation du menu déroulant Bootstrap au survol

Dans votre barre de navigation Bootstrap avec menus déroulants, vous cherchez à activer les menus déroulants au survol au lieu du onClick par défaut comportement.

Solution utilisant CSS :

La solution la plus simple pour y parvenir consiste à utiliser CSS. Ajoutez l'extrait suivant à votre fichier CSS :

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Remove the gap for seamless display */
}

Cette règle CSS définit le menu déroulant à afficher en tant qu'élément de bloc lorsque sa liste déroulante parent est survolée. De plus, il annule la marge supérieure initiale pour garantir que le menu apparaisse de manière transparente sous le bouton déroulant.

Exemple de mise en œuvre :

<!-- Dropdown with onClick behavior -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

<!-- Dropdown with onHover behavior using CSS -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

En appliquant la règle CSS à cette dernière liste déroulante, elle s'activera au survol, tandis que la première liste déroulante conserve son comportement onClick.

Notez que cette solution CSS nécessite votre les menus déroulants doivent être imbriqués de manière cohérente dans l'élément parent déroulant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!