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

Le survol déclenche la liste déroulante du menu Twitter Bootstrap

Lors de l'utilisation de Twitter Bootstrap, il est possible de rendre le menu déroulant automatiquement au survol au lieu de nécessiter un clic . Ceci est réalisé grâce à des modifications CSS.

Pour activer la liste déroulante au survol, ciblez le sélecteur de l'option de menu masquée. Par exemple, si vous utilisez l'exemple de la page Twitter Bootstrap :

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

Cependant, si vous utilisez des fonctionnalités réactives, vous souhaiterez exclure cette fonctionnalité lorsque la barre de navigation se réduit sur des écrans plus petits. Enveloppez le code ci-dessus dans une requête multimédia :

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

Suppression de la flèche déroulante

Pour masquer la flèche (caret), supprimez-la de l'ancre à bascule déroulante élément, selon votre version de Twitter Bootstrap :

• Bootstrap 3 : Supprimer le HTML de l'élément.
• Bootstrap 2 et versions antérieures : Utilisez CSS pour cibler et styliser le pseudo-élément :after :

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

N'oubliez pas de comprendre comment ces concepts fonctionnent et d'expérimenter le code pour personnaliser le comportement selon vos besoins.

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!