Comment puis-je faire apparaître les listes déroulantes Bootstrap en survol au lieu d'un clic ?

Survoler le menu Bootstrap pour le menu déroulant au lieu de cliquer

Lors de l'utilisation du framework Bootstrap de Twitter, par défaut, les options de menu apparaissent sous forme de menus déroulants lorsque les utilisateurs cliquez sur les titres. Cependant, il est possible de modifier ce comportement afin que les menus se déroulent automatiquement lorsque les utilisateurs survolent les titres.

Personnalisation CSS pour le menu déroulant de survol

Pour activer le survol pour dans le menu déroulant, vous pouvez utiliser CSS pour remplacer les paramètres par défaut. Le sélecteur CSS approprié serait :

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

Ce code garantit que le menu déroulant masqué (représenté par ul.dropdown-menu) est affiché comme un élément de bloc lorsque son élément de liste associé (li.dropdown) est survolé.

Masquer la flèche déroulante

En plus d'activer la fonctionnalité de survol, vous pouvez souhaitez masquer les petites flèches (carets) qui apparaissent à côté des titres de menu. Les étapes appropriées varient en fonction de la version de Bootstrap que vous utilisez :

Bootstrap 3

Supprimez le code HTML suivant de l'élément d'ancrage à bascule déroulant :

<b>caret</b>

Bootstrap 2 et inférieur

Utiliser le CSS sélecteur et code ci-dessous pour cibler et supprimer les flèches :

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

En implémentant ces modifications CSS, vous pouvez améliorer la convivialité de votre menu Bootstrap en permettant aux utilisateurs d'accéder plus facilement aux options déroulantes.

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!