Cara membuat dropdown menu Bootstrap Twitter di hover daripada klik


1183

Saya ingin agar menu Bootstrap saya turun secara otomatis saat mengarahkan kursor, daripada harus mengklik judul menu. Saya juga ingin kehilangan panah kecil di sebelah judul menu.


9
Ada solusi untuk itu, jadi jawaban mikko sudah benar tetapi sekarang ditutup dengan plugin untuk situasi khusus itu. bootstrap-hover-dropdown
HenryW

2
Lihat plugin tepat saya yang baru diterbitkan yang mencegah masalah CSS di bawah ini dan solusi js, dan berfungsi dengan baik di iOS dan di browser desktop modern dengan acara sentuh. Bahkan atribut aria bekerja dengan baik dengan itu: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
István Ujj-Mészáros

Saya membuat dropdown CSS3 murni dengan bootstrap navbar memeriksanya di CodePen Pure CSS3 Dropdown
Gothburz

18
Berpikir dua kali jika Anda benar-benar membutuhkannya? Bootstrap digunakan untuk situs adaptif. Ini berarti mereka akan digunakan pada perangkat dengan kontrol sentuh juga. Itu sebabnya dirancang seperti ini. Tidak ada "arahkan" pada layar sentuh.
Serj.by

Jawaban:


592

Saya membuat menu drop-down murni saat melayang berdasarkan kerangka kerja Bootstrap (v2.0.2) terbaru yang memiliki dukungan untuk beberapa submenu dan berpikir saya akan mempostingnya untuk pengguna di masa mendatang:

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>

Demo


54
itu adalah keputusan desain dalam bootstrap untuk tidak membuka dropdown pada acara hover ...
caarlos0

18
sangat baik! Saya juga menghapus class="dropdown-toggle" data-toggle="dropdown"sehingga hanya melayang, tidak klik akan memicu menu. Perhatikan bahwa ketika Anda menggunakan gaya responsif, menu masih bisa tersapu ke tombol kecil di kanan atas, yang masih dipicu oleh klik. Terima kasih banyak!
ptim

11
Untuk menghindari drop-down otomatis pada perangkat yang lebih kecil (seperti telepon) dan hanya memungkinkan pada lebar min misalnya 768px do @media (min-width: 768px) {.dropdown-menu li:hover .sub-menu {visibility: visible;}}dan@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
Chris Aelbrecht

1
Agar tautan dengan anak-anak dapat diklik, Anda harus menghapus "data-toggle = 'dropdown'" pada tag <a>.
joan16v

2
Berikut adalah kode yang berfungsi dengan versi Bootstrap 3 terbaru: jsfiddle.net/sgruenwald/2tt8f8xg
Stefan Gruenwald

910

Untuk mendapatkan menu agar secara otomatis drop pada hover maka ini dapat dicapai dengan menggunakan CSS dasar. Anda perlu menentukan pemilih untuk opsi menu yang tersembunyi dan kemudian mengaturnya untuk ditampilkan sebagai blok ketika litag yang sesuai diletakkan di atas. Mengambil contoh dari halaman bootstrap twitter, pemilihnya adalah sebagai berikut:

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

Namun, jika Anda menggunakan fitur responsif Bootstrap, Anda tidak akan menginginkan fungsi ini di navbar yang diciutkan (pada layar yang lebih kecil). Untuk menghindari ini, bungkus kode di atas dalam kueri media:

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

Untuk menyembunyikan panah (tanda sisipan) ini dilakukan dengan berbagai cara tergantung pada apakah Anda menggunakan Twitter Bootstrap versi 2 dan lebih rendah atau versi 3:

Bootstrap 3

Untuk menghapus tanda sisipan di versi 3 Anda hanya perlu menghapus HTML <b class="caret"></b>dari .dropdown-toggleelemen jangkar:

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

Bootstrap 2 & lebih rendah

Untuk menghapus tanda sisipan di versi 2 Anda perlu sedikit lebih banyak wawasan tentang CSS dan saya sarankan melihat bagaimana :afterelemen pseudo bekerja lebih detail. Untuk membantu Anda memulai cara memahami, menargetkan, dan menghapus panah dalam contoh bootstrap twitter, Anda akan menggunakan pemilih dan kode CSS berikut:

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

Ini akan menguntungkan Anda jika Anda melihat lebih jauh bagaimana ini bekerja dan tidak hanya menggunakan jawaban yang saya berikan kepada Anda.

Terima kasih kepada @CocaAkat karena telah menunjukkan bahwa kami melewatkan kombinasi anak ">" untuk mencegah sub-menu ditampilkan pada induk kursor


79
Juga harus menambahkan margin: 0;, jika margin 1px di atas .dropdown-menumenyebabkan perilaku buggy.
Salman von Abbas

12
Solusi sederhana, tetapi tautan induknya masih belum dapat diklik. Saya menggunakan bootstrap terbaru dengan tema root.
Krunal

5
Catatan: Ya itu benar - ini akan berfungsi di browser apa pun yang didukung bootstrap twitter. @ GeorgeEdison Ini adalah CSS dasar - bagian mana yang tidak didukung oleh IE8? Jika Anda mengalami masalah, kirimkan pertanyaan, bukan komentar yang menyesatkan.
Kepalaku Sakit

3
@MyHeadHurts: Setelah penelitian lebih lanjut - ternyata ini memang bug Bootstrap dan baru diperbaiki lima hari yang lalu.
Nathan Osman

5
@ Kwrunal untuk dapat mengklik tautan, Anda harus menghapus data-toggle="dropdown"atribut.
Pherrymason

231

Selain jawaban dari "My Head Hurts" (yang hebat):

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

Ada 2 masalah yang tersisa:

  1. Mengklik tautan dropdown akan membuka menu dropdown. Dan itu akan tetap terbuka kecuali pengguna mengklik di tempat lain, atau mengarahkan kembali di atasnya, menciptakan UI yang canggung.
  2. Ada margin 1px antara tautan dropdown, dan menu dropdown. Ini menyebabkan menu dropdown menjadi tersembunyi jika Anda bergerak perlahan antara menu dropdown dan dropdown.

Solusi untuk (1) adalah menghapus elemen "class" dan "data-toggle" dari tautan nav

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

Ini juga memberi Anda kemampuan untuk membuat tautan ke halaman induk Anda - yang tidak mungkin dilakukan dengan penerapan default. Anda bisa mengganti "#" dengan halaman apa pun yang ingin Anda kirimi pengguna.

Solusi untuk (2) adalah menghapus margin-top pada pemilih .dropdown-menu

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

15
Untuk memperbaiki klik yang disengaja, saya baru saja menghapus data-toggle="dropdown"atribut, yang sepertinya berfungsi.
Anthony Briggs

5
Solusi (2) untuk tombol nav-pill:.nav-pills .dropdown-menu { margin-top: 0px; }
Loren

1
Untuk memperbaiki masalah yang saya catat di atas li.dropdown: hover> ul.dropdown-menu
Archimedes Trajano

12
menghapus atribut "class" dan "data-toggle" dari nav links membuatnya berhenti berfungsi dengan baik di ponsel dan tablet :(
Mosijava

1
Jika Anda menghapus atribut data-toggle = "dropdown", Anda tidak akan dapat memperluas menu tarik turun menggunakan keyboard. Jadi tidak akan memenuhi 508. Bagaimana Anda bisa menonaktifkan klik tetapi menjaga fungsi keyboard?
duyn9uyen

130

Saya telah menggunakan sedikit 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();
});

13
Seperti ini. Saya menggunakan JQuery dengan hal-hal Bootstrap dan masih memungkinkan untuk fungsionalitas 'klik' default di perangkat layar sentuh.
Bebek di Custard

Digunakan ini. Saya suka itu masih memungkinkan fungsi klik juga, untuk ponsel, tetapi untuk desktop hover sempurna.
Stuart

1
Saya menggunakan ini tetapi juga diperluas agar bisa digunakan untuk dropdown yang tidak ada di nav. Saya menambahkan dropdown-hover kelas ke btn-group div dan menggunakan $ jQuery finder ini ('ul.nav li.dropdown, .dropdown-hover'). Hover (function () {. Terima kasih!
Brandon

Digunakan yang ini, bagus dan kecil. Versi css tidak memungkinkan submenu untuk tetap ditampilkan, dan 200 ms terlalu cepat jadi saya mengubahnya menjadi $('ul.nav li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut().hover(function() { $(this).stop(true, true); }); });: Ketika submenu melayang berhenti fadeOut
Damien

ini sepertinya tidak bekerja dengan jqLite yang termasuk dalam anguraljs
nuander

70

Ada banyak solusi yang sangat bagus di sini. Tetapi saya berpikir bahwa saya akan melanjutkan dan menempatkan milik saya di sini sebagai alternatif lain. Itu hanya potongan jQuery sederhana yang melakukan seperti bootstrap jika didukung melayang-layang untuk dropdown bukan hanya klik. Saya hanya menguji ini dengan versi 3 jadi saya tidak tahu apakah itu akan berfungsi dengan versi 2. Simpan sebagai potongan di editor Anda dan memilikinya di ujung tombol.

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

Pada dasarnya, ini hanya mengatakan ketika Anda membawa kelas dropdown, itu akan menambah kelas terbuka untuk itu. Maka itu hanya bekerja. Ketika Anda berhenti melayang di antara kedua induk li dengan kelas dropdown atau anak-anak, itu menghapus kelas terbuka. Jelas, ini hanya salah satu dari banyak solusi, dan Anda dapat menambahkannya untuk membuatnya bekerja hanya pada contoh spesifik dari dropdown. Atau tambahkan transisi ke orang tua atau anak.


2
Solusi hebat! Saya juga menghapus atribut data-toggle = "dropdown" dari tautan untuk membuat tautan atas dapat diklik.
Sergey

Itu tip yang bagus, Sergey. Saya selalu memastikan tautan teratas ke mana-mana sehingga berfungsi di tablet dan ponsel juga.
stereoscience

1
@ Tampaknya saya tidak akan merekomendasikan melakukan itu. Anda akan merusak fungsionalitas untuk pengguna seluler. Mereka tidak dapat menggunakan fungsi hover untuk membuka menu dan harus dapat mengkliknya.
Paul

2
Ini luar biasa singkat dan mudah namun masih kompatibel dengan layar sentuh. Harus lebih ditingkatkan.
Maks

Ini terlihat sangat bagus. Adakah yang tahu bagaimana cara menambahkan sedikit animasi menggunakan transisi CSS?
Fred Rocha

70

Cukup sesuaikan gaya CSS Anda dalam tiga baris kode

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

22

Jika Anda memiliki elemen dengan dropdownkelas seperti ini (misalnya):

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

Kemudian Anda dapat memiliki menu tarik-turun untuk secara otomatis drop-down di atas, daripada harus mengklik judulnya, dengan menggunakan potongan kode jQuery ini:

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

Ini demo

Jawaban ini mengandalkan jawaban @Michael , saya telah membuat beberapa perubahan dan menambahkan beberapa tambahan untuk membuat menu dropdown berfungsi dengan baik


Sempurna. Terima kasih banyak.
antikbd

20

[Perbarui] Pengaya ada di GitHub dan saya sedang mengerjakan beberapa perbaikan (seperti hanya menggunakan dengan atribut data (tidak perlu JS). Saya telah meninggalkan kode di bawah, tetapi tidak sama dengan apa yang ada di GitHub.

Saya menyukai versi murni CSS, tetapi senang memiliki penundaan sebelum ditutup, karena biasanya pengalaman pengguna yang lebih baik (yaitu tidak dihukum karena slip mouse yang berjalan 1 px di luar dropdown, dll), dan seperti yang disebutkan dalam komentar , ada margin 1px yang harus Anda hadapi atau kadang-kadang nav ditutup secara tidak terduga ketika Anda pindah ke dropdown dari tombol asli, dll.

Saya membuat plugin kecil cepat yang saya gunakan di beberapa situs dan bekerja dengan baik. Setiap item nav ditangani secara independen, sehingga mereka memiliki timer keterlambatan mereka sendiri, dll.

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

The delayparameter cukup jelas, daninstantlyCloseOthers langsung akan menutup semua dropdown lainnya yang terbuka ketika Anda hover atas yang baru.

Bukan CSS murni, tapi semoga akan membantu orang lain pada jam selarut ini (yaitu ini adalah utas lama).

Jika Anda mau, Anda dapat melihat berbagai proses yang saya lalui (dalam diskusi tentang #concrete5IRC) untuk membuatnya bekerja melalui langkah-langkah berbeda dalam inti ini: https://gist.github.com/3876924

Pendekatan pola plugin jauh lebih bersih untuk mendukung penghitung waktu individual, dll.

Lihat posting blog untuk lebih lanjut.


17

Ini bekerja untuk saya:

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

1
Namun dengan ponsel - ini aneh.
Radmation

Margin antara menu dan menu tarik turun membuat ini tidak berguna.
antikbd

15

Ini dibangun ke dalam Bootstrap 3. Cukup tambahkan ini ke CSS Anda:

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

10

Bahkan lebih baik dengan 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');
});

3
Saya mengubah kode Anda jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).closest('.dropdown-menu').stop(true, true).show(); jQuery(this).addClass('open'); }, function() { jQuery(this).closest('.dropdown-menu').stop(true, true).hide(); jQuery(this).removeClass('open'); });sehingga submenu tidak akan ditampilkan di hover.
farjam

Kode ini tidak akan berfungsi lagi dengan rilis terbaru.
Paul

9

Anda dapat menggunakan $().dropdown('toggle')metode default untuk beralih menu dropdown di hover:

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

9

Hanya ingin menambahkan, bahwa jika Anda memiliki beberapa dropdown (seperti yang saya lakukan), Anda harus menulis:

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

Dan itu akan bekerja dengan baik.


Menu .downdown-saya punya margin: 2px 0 0;yang berarti mouseEnter lambat dari atas menyembunyikan menu sebelum waktunya. ul.dropdown-menu{ margin-top: 0; }
Alastair

8

Menurut pendapat saya, cara terbaik adalah seperti ini:

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

Markup sampel:

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

5
Ini adalah karya Cameron Spear, pikir saya akan memberinya teriakan: cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin
kelpie

8

Cara terbaik untuk melakukannya adalah dengan hanya memicu acara klik Bootstrap dengan hover. Dengan cara ini, perangkat itu harus tetap ramah sentuhan.

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

Hasil yang tidak diinginkan: mousein, klik dan mouseout akan membiarkan menu terbuka. Ini bukan yang saya inginkan ...
Wietse

Menggunakan ini, Ini menjalankan fungsi bootstrap untuk membuka dropdown, Fungsi itu melakukan banyak hal lain, seperti aria-
extended

7

Saya sudah mengaturnya sebagai berikut:

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

Saya harap ini membantu seseorang ...


5

Juga menambahkan margin-top: 0 untuk mengatur ulang bootstrap css margin untuk. Dropdown-menu sehingga daftar menu tidak hilang ketika pengguna melayang perlahan dari menu drop down ke daftar menu.

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

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

2
ini adalah jawaban yang benar, bootstrap siap untuk melayang pada dropdown, jika mouse tidak pergi keluar dari menu dropdown. Menghapus margin-top memungkinkan untuk beralih dari tautan ke menu tanpa istirahat dan tanpa penutupan menu secara otomatis. Dan solusi ini memungkinkan untuk menjaga perilaku yang benar untuk perangkat sentuh
Nicolas Janel

5

Ini mungkin ide yang bodoh, tetapi untuk menghapus panah yang mengarah ke bawah, Anda dapat menghapus

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

Ini tidak melakukan apa pun untuk yang menunjuk ke atas, meskipun ...


5

Saya telah menerbitkan plugin yang tepat untuk fungsionalitas drop-down Bootstrap 3, di mana Anda bahkan dapat menentukan apa yang terjadi ketika mengklik dropdown-toggleelemen (klik dapat dinonaktifkan):

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


Mengapa saya membuatnya ketika ada banyak solusi?

Saya memiliki masalah dengan semua solusi yang ada sebelumnya. CSS sederhana tidak menggunakan .openkelas pada .dropdown, jadi tidak akan ada umpan balik pada elemen sakelar drop-down ketika drop-down terlihat.

Js yang mengganggu mengklik .dropdown-toggle , sehingga dropdown muncul di hover, kemudian menyembunyikannya saat mengklik drop-down yang terbuka, dan memindahkan mouse akan memicu drop-down untuk muncul lagi. Beberapa solusi js merusak kompatibilitas iOS, beberapa plugin tidak berfungsi pada browser desktop modern yang mendukung acara sentuh.

Itu sebabnya saya membuat plugin Bootstrap Dropdown Hover yang mencegah semua masalah ini hanya dengan menggunakan API javascript Bootstrap standar, tanpa peretasan apa pun . Bahkan atribut Aria bekerja dengan baik dengan plugin ini.


Apa pendapat Anda tentang github.com/vadikom/smartmenus ? Saya tidak bisa memutuskan, kedua perpustakaan itu tampaknya sangat bagus.
Csaba Toth

2
Smartmenus terlihat sangat bagus, mungkin lebih baik untuk menu. Plugin saya hanyalah tambahan kecil untuk dropdown bootstrap, itu tidak lebih dari membuka dropdown pada hover, sementara smartmenu mendukung submenu juga, dan melakukan beberapa hal mewah lainnya.
István Ujj-Mészáros

1
Terima kasih. Saya melihat bahwa kode smartmenu sangat luas dan ada juga banyak CSS. Sejauh ini saya ikut bootstrap-dropdown-hover, karena sepertinya melakukan pekerjaan dan lebih kompak. Saya sedang membangun situs pendaratan dengan navbar sisi kiri.
Csaba Toth

4

Gunakan kode ini untuk membuka submenu di mousehover (hanya desktop):

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

Dan jika Anda ingin menu tingkat pertama diklik, bahkan di seluler tambahkan ini:

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

Submenu (menu tarik-turun) akan dibuka dengan mousehover di desktop, dan dengan klik / sentuh pada ponsel dan tablet. Setelah submenu terbuka, klik kedua akan memungkinkan Anda membuka tautan. Berkat if ($(window).width() > 767), submenu akan mengambil lebar layar penuh di ponsel.


Saya ingin menggunakan kode Anda, tetapi saya kesulitan membuatnya berfungsi dengan benar. Pertama, bagaimana cara menghapus hover () untuk seluler dan hanya menggunakannya untuk desktop? Ketika saya menggunakan kode Anda, dan mengubah ukuran jendela ke ponsel, saya mendapatkan fungsionalitas melayang () dan klik (). Tetapi yang lebih aneh ... adalah bahwa perilaku ini akan berhenti Ketika saya menyegarkan browser, ha! Bisakah Anda menunjukkan kepada saya bagaimana cara memperbaikinya? Saya memerlukan submenu desktop untuk ditampilkan di hover () dan klik () untuk menampilkan submenu di ponsel Tanpa harus me-refresh browser bahkan ketika mengubah ukuran jendela agar berfungsi dengan baik. Saya harap ini jelas
Chris22

ok, itu masuk akal dan saya akan mencoba menjalankan solusi Anda dengan cara yang Anda rekomendasikan. Terima kasih!
Chris22

Gunakan metode terbaik ini: @falter
Farhad Sakhaei


3

Ini akan menyembunyikan yang naik

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

3

Ini harus menyembunyikan drop down dan caret mereka jika lebih kecil dari tablet.

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

Mengapa Anda ingin menyembunyikannya? Sekarang pengguna seluler tidak memiliki cara untuk mengakses tautan yang ada di submenu. Lebih baik untuk mematikan efek hover pada perangkat seluler dan menjaga menu dropdown tetap utuh. Dengan begitu mereka dapat membukanya dengan mengkliknya.
Paul

3

Solusi jQuery bagus, tetapi perlu menangani peristiwa klik (untuk ponsel atau tablet) karena hover tidak akan berfungsi dengan baik ... Mungkin bisa melakukan deteksi ukuran jendela kembali?

Jawaban Andres Ilich tampaknya bekerja dengan baik, tetapi harus dibungkus dengan kueri media:

@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

Solusi yang sangat sederhana untuk versi 2, hanya CSS. Menjaga fungsi ramah yang sama untuk seluler dan tablet.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

Ini tidak berfungsi dengan baik untuk beberapa tema di mana ada celah antara item menu dan dropdown. Menu akan hilang ketika mouse bergerak ke celah ini.
ndbroadbent

2

Timpa bootstrap.js dengan skrip ini.

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

Inilah teknik saya yang menambahkan sedikit keterlambatan sebelum menu ditutup setelah Anda berhenti melayang-layang di menu atau tombol sakelar. Yang <button>biasanya Anda klik untuk menampilkan menu nav adalah #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

Untuk meningkatkan jawaban Sudharshan , saya membungkus ini dalam kueri media untuk mencegah melayang ketika pada lebar tampilan XS ...

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

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

Karet dalam markup tidak diperlukan, hanya kelas dropdown untuk li .


2

Ini berfungsi untuk WordPress Bootstrap:

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

2

Jadi, Anda memiliki kode ini:

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

Biasanya ini berfungsi pada acara klik, dan Anda ingin itu berfungsi pada acara hover. Ini sangat sederhana, cukup gunakan kode JavaScript / jQuery ini:

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

Ini bekerja dengan sangat baik dan inilah penjelasannya: kami memiliki tombol, dan menu. Ketika kami mengarahkan tombol, kami menampilkan menu, dan ketika kami keluar dari tombol, kami menyembunyikan menu setelah 100 ms. Jika Anda bertanya-tanya mengapa saya menggunakannya, itu karena Anda perlu waktu untuk menarik kursor dari tombol di atas menu. Ketika Anda berada di menu, waktu diatur ulang dan Anda dapat tetap di sana sebanyak yang Anda inginkan. Saat Anda keluar dari menu, kami akan menyembunyikan menu secara instan tanpa batas waktu.

Saya telah menggunakan kode ini di banyak proyek, jika Anda menemui masalah dalam menggunakannya, jangan ragu untuk bertanya kepada saya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.