Question Comment rendre le menu déroulant du menu Bootstrap de Twitter en survol au lieu de cliquer


J'aimerais que mon menu Bootstrap soit automatiquement déroulé en survol, plutôt que d'avoir à cliquer sur le titre du menu. J'aimerais aussi perdre les petites flèches à côté des titres de menu.


1037
2018-01-16 09:36


origine


Réponses:


J'ai créé un menu déroulant pur sur hover basé sur le dernier framework Bootstrap (v2.0.2) qui supporte plusieurs sous-menus et pensait que je le publierais 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


528
2018-04-13 14:46



Pour que le menu passe automatiquement en survol, cela peut être réalisé en utilisant les CSS de base. Vous devez définir le sélecteur sur l'option de menu masqué, puis le définir pour l'afficher en tant que bloc lorsque le li tag est survolé. Prenant l'exemple de la page d'amorçage de Twitter, le sélecteur serait comme suit:

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

Cependant, si vous utilisez les fonctionnalités réactives de Bootstrap, vous ne voudrez pas cette fonctionnalité sur une barre de navigation réduite (sur des écrans plus petits). Pour éviter cela, 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;
  }
}

Pour masquer la flèche (caret), cela se fait de différentes manières selon que vous utilisez Twitter Bootstrap version 2 ou inférieure ou version 3:

Bootstrap 3

Pour supprimer le curseur dans la version 3, il suffit de supprimer le HTML <b class="caret"></b> du .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 curseur dans la version 2, vous avez besoin d'un peu plus d'informations sur CSS et je suggère de regarder comment le :after pseudo élément travaille plus en détail. Pour vous aider à comprendre, à cibler et à supprimer les flèches dans l'exemple d'amorçage Twitter, utilisez le sélecteur CSS et le code suivants:

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

Cela fonctionnera en votre faveur si vous regardez plus loin dans la façon dont cela fonctionne et n'utilisez pas seulement les réponses que je vous ai données.

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


874
2018-01-16 10:26



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

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

Il y a 2 problèmes persistants:

  1. Cliquez sur le lien déroulant pour ouvrir le menu déroulant. Et il restera ouvert à moins que l'utilisateur clique ailleurs, ou ne revienne dessus, créant une interface utilisateur maladroite.
  2. Il y a une marge de 1px entre le lien dropdown, et le menu déroulant. Cela fait que le menu déroulant est masqué si vous vous déplacez lentement entre le menu déroulant et le menu déroulant.

La solution de (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 parente - ce qui n'était pas possible avec l'implémentation par défaut. Vous pouvez simplement remplacer le "#" avec la page que vous voulez envoyer à l'utilisateur.

La solution à (2) enlève le margin-top sur le sélecteur de menu .dropdown

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

221
2018-02-24 18:00



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();
});

119
2018-05-22 17:49



Il y a beaucoup de très bonnes solutions ici. Mais je pensais que j'irais de l'avant et mettrais le mien ici comme une autre alternative. C'est juste un simple extrait de jQuery qui le fait comme bootstrap s'il supportait le hover pour les dropdowns au lieu de simplement cliquer. Je l'ai seulement testé avec la version 3, donc je ne sais pas si cela fonctionnerait avec la version 2. Enregistrez-le comme un extrait dans votre éditeur et l'avoir sur le coup d'une clé.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Fondamentalement, c'est juste dire quand vous passez la souris sur la classe déroulante, il va ajouter la classe ouverte à elle. Alors ça marche juste. Lorsque vous arrêtez de planer sur le parent li avec la classe déroulante ou l'enfant ul / li, il supprime la classe ouverte. Évidemment, ce n'est qu'une des nombreuses solutions, et vous pouvez y ajouter pour le faire fonctionner uniquement sur des instances spécifiques de .dropdown. Ou ajoutez une transition vers un parent ou un enfant.


64
2018-01-31 17:28



Personnalisez simplement votre style CSS dans trois lignes de code

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

60
2018-04-05 06:24



Si vous avez un élément avec un dropdown classe comme ceci (par exemple):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Ensuite, vous pouvez faire en sorte que le menu déroulant soit automatiquement déroulant en survol, plutôt que d'avoir à cliquer sur son titre, en utilisant cet extrait de code jQuery:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Voici une démo

Cette réponse s'appuyait sur @Michael réponse, J'ai apporté quelques modifications et ajouté quelques ajouts pour que le menu déroulant fonctionne correctement


20
2017-09-27 21:13



[Mettre à jour] Le plugin est allumé GitHub et je travaille sur quelques améliorations (comme l'utilisation uniquement avec des attributs de données (pas de JS nécessaire) J'ai laissé le code ci-dessous, mais ce n'est pas la même chose que sur GitHub.

J'ai aimé la version purement CSS, mais il est bon d'avoir un délai avant de la fermer, car c'est généralement une meilleure expérience utilisateur (non punie pour un mouse qui dépasse 1 px en dehors de la liste déroulante, etc), et comme mentionné dans les commentaires , il y a cette marge de 1px que vous avez à traiter ou parfois la navigation se ferme de façon inattendue lorsque vous passez à la liste déroulante du bouton d'origine, etc.

J'ai créé un petit plugin rapide que j'ai utilisé sur quelques sites et ça a bien fonctionné. Chaque élément de nav est géré indépendamment, ils ont donc leurs propres temporisateurs, etc.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

le delay paramètre est assez explicite, et le instantlyCloseOthers Ferme instantanément toutes les autres listes déroulantes ouvertes lorsque vous passez la souris sur une nouvelle liste déroulante.

CSS non pur, mais j'espère aider quelqu'un d'autre à cette heure tardive (c'est-à-dire c'est un vieux fil).

Si vous voulez, vous pouvez voir les différents processus que j'ai traversés (dans une discussion sur le #concrete5 IRC) pour le faire fonctionner à travers les différentes étapes de cet article: https://gist.github.com/3876924

L'approche du modèle de plugin est beaucoup plus propre pour supporter les minuteurs individuels, etc.

Voir le article de blog pour plus.


19
2017-10-12 03:02