Comment faire en sorte que le menu Twitter Bootstrap s'affiche au survol plutôt qu'au clic ?

Question

J'aimerais que mon menu Bootstrap s'affiche automatiquement au survol de la souris, plutôt que de devoir cliquer sur le titre du menu. J'aimerais également supprimer les petites flèches situées à côté des titres de menu.

Answer 1

Pour que le menu s'ouvre automatiquement au survol de la souris, il suffit d'utiliser les CSS de base. Vous devez déterminer le sélecteur de l'option de menu caché, puis le configurer pour qu'il s'affiche en tant que bloc lorsque l'option appropriée est activée. li au survol de la balise. En prenant l'exemple de la page twitter bootstrap, le sélecteur serait le suivant :

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

Toutefois, si vous utilisez les fonctionnalités réactives de Bootstrap, vous ne voudrez pas que cette fonctionnalité soit utilisée sur une barre de navigation réduite (sur les petits écrans). Pour éviter cela, intégrez le code ci-dessus dans une requête média :

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

---

Pour masquer la flèche (curseur), on procède de différentes manières selon que l'on utilise la version 2 et inférieure ou la version 3 de Twitter Bootstrap :

Bootstrap 3

Pour supprimer le signe d'insertion dans la version 3, il suffit de supprimer le HTML <b class="caret"></b> de la .dropdown-toggle élément d'ancrage :

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 et inférieur

Pour supprimer le signe d'insertion dans la version 2, vous devez avoir un peu plus de connaissances en CSS et je vous suggère d'examiner la façon dont la balise :after Le fonctionnement du pseudo-élément est expliqué plus en détail. Pour commencer à comprendre, pour cibler et supprimer les flèches dans l'exemple twitter bootstrap, vous devez utiliser le sélecteur CSS et le code suivants :

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

Cela jouera en votre faveur si vous examinez de plus près leur fonctionnement et si vous ne vous contentez pas des réponses que je vous ai données.

Merci à @CocaAkat d'avoir signalé qu'il nous manquait le combinateur enfant ">" pour empêcher l'affichage des sous-menus au survol du parent.

Answer 2

J'ai créé un menu déroulant pur au survol basé sur la dernière version (v2.0.2) du framework Bootstrap qui prend en charge plusieurs sous-menus et j'ai pensé le poster pour les futurs utilisateurs :

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Démo

Answer 3

En plus de la réponse de "My Head Hurts" (qui était géniale) :

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

Il y a deux problèmes persistants :

1. En cliquant sur le lien déroulant, le menu déroulant s'ouvre. Et il restera ouvert à moins que l'utilisateur ne clique ailleurs ou ne le survole à nouveau, ce qui crée une interface utilisateur maladroite.
2. Il y a une marge de 1px entre le lien vers le menu déroulant et le menu déroulant. De ce fait, le menu déroulant est masqué si vous vous déplacez lentement entre le lien déroulant et le menu déroulant.

La solution (1) consiste à supprimer les éléments "class" et "data-toggle" du lien de navigation.

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Cela vous donne également la possibilité de créer un lien vers votre page parent, ce qui n'était pas possible avec l'implémentation par défaut. Vous pouvez simplement remplacer le "#" par la page que vous souhaitez envoyer à l'utilisateur.

La solution (2) consiste à supprimer la marge supérieure du sélecteur .dropdown-menu.

.navbar .dropdown-menu {
    margin-top: 0px;
}

Answer 4

J'ai utilisé un peu de jQuery :

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Answer 5

Il suffit de personnaliser votre style CSS en trois lignes de code

.dropdown:hover .dropdown-menu {
   display: block;
}