Jak zrobić rozwijane menu Twitter Bootstrap po najechaniu kursorem zamiast kliknąć

Aby menu automatycznie spadało po najechaniu kursorem, można to osiągnąć za pomocą podstawowego CSS. Musisz przećwiczyć selektor do opcji ukrytego menu, a następnie ustawić go na wyświetlanie jako blok, gdy odpowiedni znacznik li jest najechany. Biorąc przykład ze strony Bootstrap na Twitterze, selektor będzie wyglądał następująco:

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

Jeśli jednak używasz funkcji responsywnych Bootstrap, nie będziesz chciał tej funkcji na zwiniętym pasku nawigacyjnym (na mniejszych ekranach). Aby tego uniknąć, zawiń powyższy kod w zapytaniu o media:

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

Aby ukryć strzałkę (karetkę), odbywa się to na różne sposoby w zależności od tego, czy używasz Twittera Bootstrap w wersji 2 i niższej, czy w wersji 3:

Bootstrap 3

Aby usunąć karetkę w wersji 3 wystarczy usunąć HTML {[5] } z elementu anchor .dropdown-toggle:

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

Bootstrap 2 & lower

Aby usunąć karetkę w wersji 2 potrzebujesz trochę więcej wglądu w CSS i sugerujemy przyjrzenie się bardziej szczegółowemu działaniu pseudo elementu :after. Aby rozpocząć swoją drogę do zrozumienia, aby kierować i usuwać strzałki w przykładzie Twitter bootstrap, użyjesz następującego selektora CSS i kodu:

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

Będzie to działać na Twoją korzyść, jeśli przyjrzysz się dalej, Jak to działa, a nie tylko skorzystasz z odpowiedzi, które ci dałem.

Dzięki @CocaAkat za zwrócenie uwagi, że brakowało nam kombinatora " > " child, aby zapobiec sub menu wyświetlane po najechaniu na rodzica

Oprócz odpowiedzi z "Boli mnie głowa "(co było świetne):

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

Są 2 Problemy:

1. kliknięcie na link rozwijany otworzy menu rozwijane. I pozostanie otwarty, chyba że użytkownik kliknie gdzieś indziej lub zawiesi kursor na nim, tworząc niezręczny interfejs użytkownika.
2. pomiędzy linkiem rozwijanym i menu rozwijanym znajduje się margines 1px. Powoduje to, że menu rozwijane staje się ukryte, jeśli poruszasz się powoli między rozwijanym menu i menu rozwijane.

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

Daje to również możliwość utworzenia linku do strony nadrzędnej - co nie było możliwe przy domyślnej implementacji. Możesz po prostu zastąpić " # " dowolną stroną, którą chcesz wysłać użytkownikowi.

Rozwiązaniem do (2) jest usunięcie margin-top na .dropdown-menu selector

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

Użyłem trochę 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();
});

Jest tu wiele naprawdę dobrych rozwiązań. Ale pomyślałem, że zrobię to tutaj, jako alternatywę. To tylko prosty fragment jQuery, który robi to tak, jak zrobiłby to bootstrap, gdyby obsługiwał kursor dla rozwijanych menu zamiast po prostu kliknąć. Testowałem to tylko z wersją 3, więc nie wiem, czy zadziała z wersją 2. Zapisz go jako fragment w edytorze i umieść za naciśnięciem klawisza.

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

W Zasadzie, to tylko powiedzenie, gdy unosisz się na Klasa rozwijana, doda do niej klasę otwartą. Wtedy to po prostu działa. Gdy zatrzymasz kursor na rodzicu li z rozwijaną klasą lub potomku ul / li, usunie on klasę otwartą. Oczywiście jest to tylko jedno z wielu rozwiązań i można do niego dodać, aby działało tylko na konkretnych instancjach .lista startowa. Lub dodać przejście do rodzica lub dziecka.

Po prostu dostosuj swój styl CSS w trzech liniach kodu

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

Jeśli masz element z klasą dropdown taką jak ta (na przykład):

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

Następnie możesz mieć rozwijane menu automatycznie rozwijane po najechaniu na nie, zamiast klikać jego tytuł, używając tego fragmentu kodu 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>

Oto demo

Ta odpowiedź opiera się na @Michael answer , wprowadziłem kilka zmian i dodałem kilka dodatków, aby menu rozwijane działało poprawnie

[Update] wtyczka jest na GitHub i pracuję nad pewnymi ulepszeniami (np. używaj tylko z atrybutami danych (bez JS). Zostawiłam kod poniżej, ale to nie to samo co na Githubie.

Podobała mi się Wersja czysto CSS, ale miło jest mieć opóźnienie, zanim się zamknie, ponieważ zwykle jest to lepsze doświadczenie użytkownika (tj. Nie karane za poślizg myszy, który wychodzi 1 px poza rozwijaną listę itp.), i jak wspomniano w komentarzach, jest to 1px z rozwijanej listy margines, z którym masz do czynienia lub czasami nav zamyka się nieoczekiwanie, gdy przenosisz się do listy rozwijanej z oryginalnego przycisku itp.

Stworzyłem szybki mały plugin, który użyłem na kilku stronach i działa ładnie. Każdy element nav jest obsługiwany niezależnie, więc mają własne timery opóźnienia, itp.

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

Parametr delay jest dość oczywisty, a instantlyCloseOthers natychmiast zamknie wszystkie inne rozwijane listy, które są otwarte po najechaniu kursorem na nowy.

Nie czysty CSS, ale mam nadzieję, że pomoże komuś o tak późnej porze (tzn. jest to stary wątek).

Jeśli chcesz, możesz zobaczyć różne procesy, przez które przeszedłem (w dyskusji na IRC #concrete5), aby uruchomić go za pomocą różnych kroków w tym gist: https://gist.github.com/3876924

Podejście do wzorców wtyczek jest znacznie czystsze, aby obsługiwać Indywidualne Zegary itp.

To mi pomogło:

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

Jest to wbudowane w Bootstrap 3. Po prostu dodaj to do swojego CSS:

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

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

Możesz użyć domyślnej metody $().dropdown('toggle'), aby przełączyć rozwijane menu po najechaniu kursorem:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Chcę tylko dodać, że jeśli masz wiele rozwijanych (tak jak ja) powinieneś napisać:

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

Najlepszym sposobem na to jest po prostu uruchomienie zdarzenia kliknięcia Bootstrap za pomocą najechania kursorem. W ten sposób powinien pozostać przyjazny dla urządzeń dotykowych.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Moim zdaniem najlepszy sposób jest taki:

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

Przykładowy znacznik:

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

Udało mi się to w następujący sposób:

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

Dodano również margin-top: 0, aby zresetować margines Bootstrap css dla .rozwijane-menu, aby lista menu nie znikała, gdy użytkownik najeżdża powoli z rozwijanego menu na listę menu.

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

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

To prawdopodobnie głupi pomysł, ale aby po prostu usunąć strzałkę skierowaną w dół, Możesz usunąć

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

To jednak nie robi nic dla wskazującego w górę...

Opublikowałem odpowiedni plugin dla funkcji Bootstrap 3 rozwijanego hover, w którym możesz nawet zdefiniować, co się dzieje po kliknięciu na element dropdown-toggle (kliknięcie można wyłączyć):

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

Dlaczego to zrobiłem, skoro rozwiązań jest już wiele?

Te js zakłócają klikanie na .dropdown-toggle, więc rozwijane pojawia się po najechaniu kursorem, a następnie ukrywa je po kliknięciu na otwartej rozwijanej, a przesunięcie myszy spowoduje, że rozwijane pojawi się ponownie. Niektóre z rozwiązań js łamią kompatybilność z iOS, niektóre wtyczki nie działają na nowoczesnych przeglądarkach desktopowych, które obsługują zdarzenia dotykowe.

Dlatego zrobiłem Bootstrap rozwijany Hover wtyczka , która zapobiega wszystkim tym problemom przez używając tylko standardowego Bootstrap javascript API, bez żadnych hack . Nawet atrybuty Aria działają dobrze z tą wtyczką.

Użyj tego kodu, aby otworzyć podmenu w mousehover (tylko na pulpicie):

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

I jeśli chcesz, aby menu pierwszego poziomu było klikalne, nawet na telefonie dodaj to:

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

Podmenu (menu rozwijane) zostanie otwarte za pomocą mousehover na komputerze, a za pomocą click/touch na telefonie komórkowym i tablecie. Po otwarciu podmenu drugie kliknięcie pozwoli Ci otworzyć link. Dzięki if ($(window).width() > 767), podmenu zajmie pełną szerokość ekranu w telefonie komórkowym.

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

To ukryje up one

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

To powinno ukryć spadki i ich karetki, jeśli są mniejsze niż tabletka.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

Rozwiązanie jQuery jest dobre, ale będzie musiało radzić sobie z wydarzeniami kliknięć (na telefon komórkowy lub tablet), ponieważ hover nie będzie działać poprawnie... Może uda Ci się wykryć zmianę rozmiaru okna?

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

Zastąp bootstrap.js z tym skryptem.

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

}); 

Oto moja technika, która dodaje niewielkie opóźnienie przed zamknięciem menu po zatrzymaniu kursora myszy na menu lub przycisku przełączania. <button>, które zwykle klikasz, aby wyświetlić menu nav, to #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);
});

Aby poprawić odpowiedź Sudharshana , zawijam to w Zapytanie o media, aby zapobiec najechaniu kursorem, gdy na szerokości wyświetlacza XS...

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

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

Również karetka w znacznikach nie jest wymagana, tylko klasa rozwijana dla li .

To działa dla WordPress Bootstrap:

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

Więc masz ten kod:

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

Zwykle działa na zdarzeniu kliknięcia i chcesz, aby działało na zdarzeniu najazdu. Jest to bardzo proste, wystarczy użyć tego kodu 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();
        })
    })
})

To działa bardzo dobrze i oto Wyjaśnienie: mamy przycisk i menu. Po najechaniu na przycisk wyświetlamy menu, a po najechaniu na przycisk ukrywamy menu po 100 ms. Jeśli zastanawiasz się, dlaczego tego używam, to dlatego, że potrzebujesz czasu, aby przeciągnąć kursor z przycisku nad menu. Kiedy jesteś w menu, czas jest resetowany i możesz pozostać tam tyle czasu, ile chcesz. Po wyjściu z menu natychmiast ukryjemy menu bez limitu czasu.

Używałem tego kodu w wielu projektach, jeśli napotkasz jakiś problem z jego użyciem, nie krępuj się zadawać mi pytań.

Dla karetki... Nie widziałem żadnego określającego prosty CSS, który całkowicie blokuje karetkę.

Proszę bardzo:

.caret {
    display: none !important;
}