Comment faire de Twitter Bootstrap menu dropdown sur le vol stationnaire plutôt que de cliquer

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

1058
demandé sur Peter Mortensen 2012-01-16 13:36:40
la source

30 ответов

j'ai créé un menu déroulant pur on hover basé sur le dernier (v2.0.2) Bootstrap framework qui prend en charge plusieurs sous-menus et pense que je l'afficherai 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

537
répondu Andres Ilich 2017-07-29 21:18:37
la source

pour obtenir le menu de tomber automatiquement sur le vol stationnaire puis cela peut être réalisé en utilisant CSS de base. Vous avez besoin de travailler sur le sélecteur de l'option de menu caché, puis de le définir pour l'afficher en bloc lorsque la balise li appropriée est survolée. 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;    
}

cependant, si vous utilisez les fonctionnalités responsive De Bootstrap, vous ne voudrez pas de cette fonctionnalité sur une barre de navigation effondrée (sur les petits écrans). Pour éviter cela, envelopper 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 (caret) cela se fait de différentes manières selon que vous utilisez Bootstrap version 2 et inférieure ou version 3:

Bootstrap 3

pour supprimer le caret dans la version 3, vous avez juste besoin de supprimer le HTML <b class="caret"></b> de la .dropdown-toggle ancre élément:

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

Bootstrap 2 & lower

pour supprimer le caret dans la version 2, vous avez besoin d'un peu plus d'informations sur CSS et je suggère d'examiner comment le :after pseudo élément fonctionne plus en détail. Pour vous mettre en route vers la compréhension, cibler et supprimer les flèches de l'exemple de bootstrap twitter, vous utilisez le sélecteur CSS et le code suivant:

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

il sera travaillez en votre faveur si vous examinez plus en détail la façon dont cela fonctionne et ne vous contentez pas d'utiliser les réponses que je vous ai données.

merci à @CocaAkat de nous avoir fait remarquer qu'il nous manquait le " > "combinateur d'enfants pour empêcher que les sous-menus ne soient affichés sur le vol stationnaire parent

879
répondu My Head Hurts 2015-04-22 22:28:38
la source

en plus de la réponse de "My Head Hurts" (qui était grande):

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

il y a 2 problèmes persistants:

  1. en cliquant sur le lien déroulant, vous ouvrez le menu déroulant. Et il restera ouvert à moins que l'utilisateur ne clique ailleurs, ou ne revienne dessus, créant une interface utilisateur embarrassante.
  2. il y a une marge de 1px entre le lien "dropdown" et le menu "dropdown". Cela fait que le menu déroulant devient caché si vous vous déplacez lentement entre le dropdown et le dropdown-menu.

la solution à (1) est de supprimer les éléments" class "et" data-toggle "de la liaison nav

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

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

la solution à (2) est en train d'enlever le margin-top sur le .dropdown-sélecteur de menu

.navbar .dropdown-menu {
 margin-top: 0px;
}
221
répondu Cory Price 2012-02-24 22:14:52
la source

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();
});
120
répondu John Montgomery 2017-07-29 21:21:08
la source

Il y a beaucoup de très bonnes solutions. Mais j'ai pensé que je pourrais aller de l'avant et mettre le mien ici comme une autre alternative. C'est juste un simple jQuery snippet qui le fait de la façon dont bootstrap le ferait s'il supportait le hover for dropdowns au lieu de simplement cliquer. Je ne l'ai testé qu'avec la version 3, donc je ne sais pas si ça marcherait avec la version 2. Enregistrez-le comme un fragment dans votre éditeur et conservez-le d'un seul coup de clé.

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

en gros, c'est juste en disant que lorsque vous volez sur la classe de descente, il ajoutera la classe ouverte à elle. Ensuite, il fonctionne, tout simplement. Lorsque vous arrêtez de stationner sur le li parent avec la classe dropdown 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 cas précis d' .déroulante. Ou ajouter une transition à l'un des parents ou à l'enfant.

64
répondu stereoscience 2014-01-31 21:28:27
la source

personnalisez simplement votre style CSS en trois lignes de code

.dropdown:hover .dropdown-menu {
   display: block;
}
62
répondu Ranjith 2015-02-26 16:44:57
la source

si vous avez un élément de la classe dropdown 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>

alors vous pouvez avoir le menu déroulant pour être automatiquement déposer sur le hover over, plutôt que d'avoir à cliquer 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 reposait sur @Michael réponse , j'ai fait quelques modifications et ajout de quelques ajouts pour obtenir le menu déroulant fonctionne correctement

20
répondu Amr 2017-07-29 21:38:14
la source

[Update] le plugin est sur GitHub et je travaille sur quelques améliorations (comme utiliser seulement avec des données-attributs (pas de JS nécessaire). J'ai laissé le code en dessous, mais ce n'est pas la même chose que ce qu'il y a sur GitHub.

j'ai aimé la version purement CSS, mais c'est bien d'avoir un délai avant qu'elle ne se ferme, car c'est généralement une meilleure expérience utilisateur (i.e. non punished for a mouse slip that goes 1 px outside the dropdown, etc), et comme mentionné dans les commentaires, Il ya que 1px de marge que vous avez à traiter avec ou parfois le nav ferme de façon inattendue lorsque vous passez à la baisse à partir du bouton original, etc

j'ai créé un petit plugin rapide que j'ai utilisé sur quelques sites et il a bien fonctionné. Chaque élément nav est géré indépendamment, donc ils ont leurs propres retardateurs,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 le paramètre est assez explicite, et le instantlyCloseOthers fermera instantanément toutes les autres chutes qui sont ouvertes lorsque vous survolez une nouvelle chute.

pas CSS pur, mais avec un peu de chance aidera quelqu'un d'autre à cette heure tardive (i.e. c'est un vieux fil).

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

l'approche de modèle de plugin est beaucoup plus propre pour supporter des minuteries individuelles, etc.

Voir la blog post pour plus d'.

19
répondu CWSpear 2012-10-26 23:56:46
la source

cela a fonctionné pour moi:

.dropdown:hover .dropdown-menu {
    display: block;
}
16
répondu Amay Kulkarni 2017-07-29 21:41:08
la source

c'est intégré dans Bootstrap 3. Il suffit d'ajouter ceci à votre CSS:

.dropdown:hover .dropdown-menu {
display: block;
}
10
répondu BSUK 2017-11-18 23:23:39
la source

encore mieux avec jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});
9
répondu caarlos0 2012-08-17 05:51:38
la source

vous pouvez utiliser la méthode par défaut $().dropdown('toggle') pour basculer le menu déroulant en stationnaire:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});
9
répondu sdvnksv 2015-09-23 11:47:18
la source

je veux juste ajouter, que si vous avez plusieurs abandons (comme je le fais) vous devez écrire:

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

et ça marchera.

8
répondu Maxim Filippov 2013-10-18 02:11:11
la source

la meilleure façon de le faire est de déclencher le click de Bootstrap avec un hover. De cette façon, il devrait toujours rester facile à toucher.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
8
répondu Mark Williams 2017-07-29 21:31:08
la source

À mon avis, la meilleure façon est comme ceci:

;(function($, window, undefined) {
    // 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 = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

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

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Exemple de syntaxe:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>
7
répondu Alex 2017-07-29 21:30:00
la source

Je l'ai géré comme suit:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

j'espère que cela aidera quelqu'un...

7
répondu Mehdi Maghrooni 2017-07-29 21:30:29
la source

a aussi ajouté la marge-top: 0 pour réinitialiser la marge CSS de bootstrap.dropdown-menu de sorte que la liste de menu ne se détache pas lorsque l'utilisateur plane lentement du menu de descente à la liste de menu.

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

.nav .dropdown-menu {
    margin-top: 0;
}
5
répondu Sudharshan 2014-05-14 16:05:35
la source

C'est probablement une idée stupide, mais seulement de supprimer la flèche pointant vers le bas, vous pouvez supprimer le

<b class="caret"></b>

cela ne fait rien pour le pointage vers le haut, cependant...

5
répondu stinaq 2017-07-29 21:20:23
la source

j'ai publié un bon plugin pour le Bootstrap 3 dropdown la fonctionnalité de vol stationnaire, dans lequel vous pouvez même définir ce qui se passe en cliquant sur l'élément dropdown-toggle (le clic peut être désactivé):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover


" pourquoi l'ai-je fait alors qu'il existe déjà de nombreuses solutions?

j'ai eu des problèmes avec toutes les solutions existantes. Les CSS simples n'utilisent pas la classe .open sur le .dropdown , il n'y aura donc pas de retour sur l'élément de bascule lorsque le bascule est visible.

les js ones interfèrent avec le clic sur .dropdown-toggle , de sorte que le dropdown apparaît en stationnaire, puis le cache en cliquant sur un drop-down ouvert, et en déplaçant la souris déclenchera le drop-down pour apparaître à nouveau. Certaines des solutions js sont brisant la compatibilité iOS, certains plugins ne fonctionnent pas sur les navigateurs de bureau modernes qui prennent en charge les événements touch.

C'est pourquoi j'ai fait le Bootstrap Dropdown Hover plugin qui empêche tous ces problèmes par en utilisant uniquement L'API javascript Bootstrap standard, sans aucun piratage . Même les attributs Aria fonctionnent très bien avec ce plugin.

5
répondu István Ujj-Mészáros 2018-01-25 04:49:43
la source

utilisez ce code pour ouvrir le sous-menu sur mousehover (bureau seulement):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

et si vous voulez que le premier menu de niveau soit cliquable, même sur mobile ajouter ceci:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

le sous-menu (dropdown-menu) sera ouvert avec mousehover sur le bureau, et avec click/touch sur mobile et tablette. Une fois le sous-menu est ouvert, un second clic vous permettra d'ouvrir le lien. Grâce au if ($(window).width() > 767) , le sous-menu prendra la pleine largeur de l'écran sur mobile.

4
répondu Jibato 2017-01-10 18:53:14
la source
$('.dropdown').hover(function(e){$(this).addClass('open')})
4
répondu Савостьянов Максим 2017-02-14 16:45:08
la source

ça cachera les up

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}
3
répondu allochi 2012-04-11 20:26:06
la source

cela devrait Cacher les gouttes et leurs caresses si elles sont plus petites qu'un comprimé.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}
3
répondu Kevin Nuut 2013-10-18 02:12:07
la source

la solution de jQuery est bonne, mais elle devra soit traiter les évènements de clic (pour mobile ou tablette) car le hover ne fonctionnera pas correctement... Peut-être faire une détection de fenêtre de nouvelle taille?

la réponse D'Andres Ilich semble bien fonctionner, mais elle devrait être enveloppée dans une requête média:

@media (min-width: 980px) {

    .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;
    }
}
3
répondu Fizex 2017-07-29 21:23:22
la source

Overwrite bootstrap.js avec ce script.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 
2
répondu Hari Krishnan 2014-01-22 09:53:21
la source

voici ma technique qui ajoute un léger retard avant que le menu ne soit fermé après que vous arrêtiez de planer sur le menu ou le bouton à bascule. Le <button> que vous cliquez normalement pour afficher le menu nav est #nav_dropdown .

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});
2
répondu Sarah Vessels 2014-02-18 23:43:21
la source

to enhance Sudharshan's answer , Je l'enroule dans une requête média pour prévenir le vol stationnaire lorsque sur les largeurs d'affichage XS...

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

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

même le caret dans la majoration n'est pas nécessaire, juste le dropdown classe pour le li .

2
répondu johna 2017-05-23 14:47:26
la source

cela fonctionne pour Bootstrap WordPress:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}
2
répondu Fred K 2017-07-29 21:23:46
la source

donc vous avez ce code:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Normalement, il fonctionne sur un événement de clic, et vous souhaitez travailler sur un hover événement. C'est très simple, il suffit d'utiliser ce code JavaScript / jQuery:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Cela fonctionne très bien et voici l'explication: nous avons un bouton et un menu. Quand nous plantons le bouton nous affichons le menu, et quand nous Mouse out du bouton nous cachons le menu après 100 ms. Si vous vous demandez pourquoi je l'utilise, c'est parce que vous avez besoin le temps de faire glisser le curseur à partir du bouton sur le menu. Lorsque vous êtes sur le menu, le temps est remis à zéro et vous pouvez y rester autant de temps que vous le souhaitez. Lorsque vous quittez le menu, nous allons cacher le menu instantanément sans aucun délai.

j'ai utilisé ce code dans de nombreux projets, si vous rencontrez un problème en l'utilisant, n'hésitez pas à me poser des questions.

2
répondu Crisan Raluca Teodora 2017-07-29 21:32:52
la source

pour le caret... Je n'ai vu personne spécifier des CSS simples qui bloquent totalement le caret.

Ici, vous allez:

.caret {
    display: none !important;
}
2
répondu Restartit Fbapp 2017-07-29 21:39:07
la source

Autres questions sur css twitter-bootstrap drop-down-menu