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

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

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

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

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.

personnalisez simplement votre style CSS en trois lignes de code

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

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

[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'.

cela a fonctionné pour moi:

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

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

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

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

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

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.

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

À 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>

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...

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

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...

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.

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.

$('.dropdown').hover(function(e){$(this).addClass('open')})

ça cachera les up

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

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

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

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

}); 

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

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 .

cela fonctionne pour Bootstrap WordPress:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

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.

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