Pertanyaan Cara membuat dropdown menu Twitter Bootstrap pada hover daripada klik


Saya ingin menu Bootstrap saya secara otomatis drop down pada hover, daripada harus mengklik judul menu. Saya juga ingin kehilangan panah kecil di samping judul-judul menu.


1037
2018-01-16 09:36


asal


Jawaban:


Saya membuat menu hover dropdown murni berdasarkan kerangka kerja Bootstrap terbaru (v2.0.2) 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


528
2018-04-13 14:46



Untuk mendapatkan menu agar dapat dilepas secara otomatis, ini dapat dicapai menggunakan CSS dasar. Anda perlu mengatur pemilih ke opsi menu tersembunyi dan kemudian mengaturnya untuk ditampilkan sebagai blok ketika yang sesuai li tag berada di atas. Mengambil contoh dari halaman bootstrap twitter, pemilih akan seperti berikut:

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

Namun, jika Anda menggunakan fitur responsif Bootstrap, Anda tidak akan menginginkan fungsi ini pada navbar yang diciutkan (pada layar yang lebih kecil). Untuk menghindarinya, 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 cara yang berbeda tergantung pada apakah Anda menggunakan Twitter Bootstrap versi 2 dan versi yang lebih rendah atau versi 3:

Bootstrap 3

Untuk menghapus caret di versi 3 Anda hanya perlu menghapus HTML <b class="caret"></b> dari .dropdown-toggle elemen anchor:

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

Bootstrap 2 & lebih rendah

Untuk menghapus caret di versi 2 Anda memerlukan sedikit lebih banyak wawasan tentang CSS dan saya sarankan untuk melihat bagaimana :after elemen semu bekerja lebih detail. Untuk memulai dengan cara Anda memahami, untuk menargetkan dan menghapus panah di 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 cara kerjanya dan tidak hanya menggunakan jawaban yang telah saya berikan kepada Anda.

Terima kasih kepada @CocaAkat untuk menunjukkan bahwa kami tidak menggunakan kombinator anak ">" untuk mencegah sub-menu ditampilkan di hover orang tua


874
2018-01-16 10:26



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

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

Ada 2 masalah berlama-lama:

  1. Mengeklik tautan tarik-turun akan membuka menu tarik-turun. Dan itu akan tetap terbuka kecuali pengguna mengklik di tempat lain, atau melayang di atasnya, menciptakan UI canggung.
  2. Ada margin 1px antara tautan dropdown, dan menu dropdown. Ini menyebabkan menu dropdown menjadi tersembunyi jika Anda bergerak lambat di 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 dimungkinkan dengan implementasi default. Anda tinggal mengganti "#" dengan halaman apa pun yang ingin Anda kirimi pengguna.

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

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

221
2018-02-24 18:00



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

119
2018-05-22 17:49



Ada banyak solusi yang sangat bagus di sini. Tetapi saya berpikir bahwa saya akan terus maju dan menempatkan tambang saya di sini sebagai alternatif lain. Ini hanya potongan jQuery sederhana yang melakukannya dengan cara bootstrap jika didukung hover untuk dropdown, bukan hanya klik. Saya hanya menguji ini dengan versi 3, jadi saya tidak tahu apakah ini akan bekerja dengan versi 2. Simpan sebagai cuplikan di editor Anda dan dapatkan dengan menekan tombol.

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

Pada dasarnya, ini hanya mengatakan ketika Anda mengarahkan pada kelas dropdown, itu akan menambah kelas terbuka untuk itu. Maka itu berfungsi. Ketika Anda berhenti melayang pada li orang tua dengan kelas dropdown atau anak ul / li, itu menghapus kelas terbuka. Tentunya, ini hanyalah salah satu dari banyak solusi, dan Anda dapat menambahkannya untuk membuatnya berfungsi hanya pada contoh spesifik .dropdown. Atau tambahkan transisi ke orang tua atau anak.


64
2018-01-31 17:28



Cukup sesuaikan gaya CSS Anda dalam tiga baris kode

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

60
2018-04-05 06:24



Jika Anda memiliki elemen dengan dropdown kelas 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>

Maka Anda dapat memiliki menu dropdown 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 diandalkan Jawaban @MichaelSaya telah membuat beberapa perubahan dan menambahkan beberapa tambahan untuk mendapatkan menu dropdown berfungsi dengan benar


20
2017-09-27 21:13