Menus déroulants activés au survol dans Twitter Bootstrap

De nombreux utilisateurs préfèrent que leurs menus Bootstrap se déroulent au survol, éliminant ainsi le besoin de clics explicites . Cet article traite à la fois de la fonctionnalité de survol et de la suppression des icônes fléchées à côté des titres de menu.

Déroulant activé par survol

Pour activer la liste déroulante automatique au survol, utilisez CSS pour ciblez l’option de menu cachée. Ajoutez le code suivant à votre CSS :

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

Pour les conceptions réactives, enveloppez le code dans une requête multimédia :

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

Suppression de l'icône de flèche

• Bootstrap 3 : Supprimez le HTML de l'élément d'ancrage .dropdown-toggle.
• Bootstrap 2 & Lower : Ciblez et supprimez les flèches à l'aide de ce CSS sélecteur :

a.menu:after, .dropdown-toggle:after {
    content: none;
}

En incorporant ces modifications CSS, vous pouvez obtenir des menus déroulants activés par le survol et éliminer les icônes de flèche, améliorant ainsi l'expérience utilisateur et personnalisant vos menus Bootstrap comme vous le souhaitez.