Comment puis-je activer les listes déroulantes Bootstrap en survol et supprimer les flèches ?

Déroulants du menu Bootstrap hoverables

Développant le sujet des menus déroulants du menu Bootstrap, cet article approfondit la personnalisation de leur comportement et de leur apparence. Plus précisément, il explore comment activer le survol comme alternative au clic pour l'activation du menu et à la suppression des flèches qui l'accompagnent.

Déroulant automatique en survol

Pour obtenir un menu déroulant automatique en survol survolez, des modifications CSS sont nécessaires. En ciblant les options de menu masquées et en les affichant sous forme de blocs lorsque l'élément de liste correspondant est survolé, la fonctionnalité souhaitée est obtenue. Prenons l'exemple suivant tiré de la documentation Bootstrap :

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

Considérations relatives au responsive

Si les fonctionnalités responsives de Bootstrap sont utilisées, la fonctionnalité de liste déroulante automatique peut ne pas être souhaitable pour une navigation réduite. barres sur des écrans plus petits. Pour résoudre ce problème, le code CSS peut être enveloppé dans une requête multimédia :

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

Suppression des flèches (Caret)

La dissimulation des flèches déroulantes dépend de la version de Bootstrap utilisé.

Bootstrap 3

Pour Bootstrap 3, supprimez simplement l'élément HTML de l'élément d'ancrage .dropdown-toggle.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <!-- remove this line -->
</a></p>
<p><strong>Bootstrap 2 et inférieur</strong></p>
<p>Dans Bootstrap 2 et plus tôt, le sélecteur CSS et le code ci-dessous peuvent être utilisés pour supprimer le flèches :</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

Conclusion

La personnalisation des menus déroulants du menu Bootstrap pour les activer au survol et la suppression des flèches permettent une expérience utilisateur et des préférences esthétiques améliorées. Comprendre les principes CSS sous-jacents permet aux développeurs de mettre en œuvre de manière transparente ces modifications dans leurs projets.

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!