Comment créer des menus déroulants activés par le survol et supprimer les icônes de flèche dans Bootstrap ?

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 de flèche à côté des titres de menu.

Déroulant activé par le survol

Pour activer le menu déroulant 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 du Élément d'ancrage .dropdown-toggle.
• Bootstrap 2 et inférieur : Ciblez et supprimez les flèches à l'aide de ce sélecteur CSS :

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

En incorporant ces CSS modifications, 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 souhaité.

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!