Menampilkan Dropdown Bootstrap 3.1.1 dengan :hover selector

bootstrap

Sebuah pertanyaan menggelitik otak saya ketika membaca pertanyaan seorang member sebuah grup di Facebook.

permisi, mau nanya, kalo dropdown bootstrap pengen muncul otomatis pas mousehover gemana ya caranya?

Enable Bootstrap Dropdown on :hover

Hmm,, Dropdown di Bootstrap memang di buat sedemikian rupa untuk meng-handle click event. Mengapa?? Karena di smartphone (touch screen) tidak ada :hover, yang ada hanyalah touch/ sentuh.

Lalu, bagaimana jika kita tetap memaksa menggunakan :hover pada dropdown Bootstrap??

Mari, kita coba

Siapkan file html anda, lalu masukkan komponen Bootstrap (css, javascript) jangan lupa jQuery-nya.

Dalam tag <body>, buat dropdown-nya. Saya copy-paste dari official site-nya

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-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><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-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><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Hasilnya:

Bootstrap Dropdown

Kemudian, buka file css, dan tambahkan code ini (di baris paling bawah):

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

Sekarang dropdown Bootstrap mu bisa di :hover.

Yup, cukup simple kan??

Live source code: http://jsbin.com/sisef/1

Leave a Reply

Your email address will not be published. Required fields are marked *