Comment puis-je créer des listes déroulantes activées par le survol dans Twitter Bootstrap ?

Déroulants de survol pour Twitter Bootstrap

Lors de l'utilisation du système de menus de Twitter Bootstrap, il peut être souhaitable que les menus se déroulent automatiquement au survol, éliminant ainsi la nécessité de cliquer sur le titre du menu. De plus, les utilisateurs préféreront peut-être masquer les flèches de navigation adjacentes aux titres des menus.

CSS pour les listes déroulantes au survol

Pour activer les listes déroulantes automatiques au survol, implémentez le CSS suivant :

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Pour une fonctionnalité réactive, enveloppez le code dans un média requête :

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

CSS pour masquer les flèches de navigation

Bootstrap 3 :

Supprimer le HTML à partir de l'ancre .dropdown-toggle élément.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a></p>
<p><strong>Bootstrap 2 et inférieur :</strong></p>
<p>Ciblez et supprimez les flèches à l'aide de ce sélecteur CSS et de ce code :</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

Comprendre le fonctionnement de ces éléments CSS améliorera votre capacité à personnaliser les menus Bootstrap pour répondre à vos besoins spécifiques.

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!