Membuat Menu Dropdown di Bootstrap

08 December 2016
Setelah 9 bulan vakum dari blog, saya ingin melanjutkan lagi pembahasan mengenai bootstrap yang sempat tertunda. Sebelumnya saya minta maaf karena terlalu lama vakumnya. Oke kita lanjut...

Dropdowns

Untuk membuat menu dropdown, kita perlu membungkus pemicunya (trigger) dan menu dropdown dengan .dropdown
Contoh penerapannya:
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>
Hasilnya:

Kita juga bisa mengubah arahnya menjadi memanjang keatas (biasanya kebawah) dengan mengganti pembungkusnya dengan .dropup
Contoh penerapannya:
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>
Hasilnya:

Alignment

Secara default, posisi menu dropdown berada di 100% dari atas dan sisi kiri dari induknya. Untuk membuatnya berada disisi kanan, gunakan .dropdown-menu-right pada .dropdown-menu
Formatnya seperti ini:
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Headers

Untuk menambahkan header pada label menu dropdown, kita gunakan class .dropdown-header pada <li>
Contoh penerapannya:
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">Header 1</li>
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
    <li class="dropdown-header">Header 2</li>
    <li><a href="#">Sub Menu 4</a></li>
  </ul>
</div>
Hasilnya:

Divider

Tambahkan divider untuk memberi pembatas link pada menu dropdown
Contoh penerapannya:
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Sub Menu 4</a></li>
  </ul>
</div>
Hasilnya seperti ini:

Disabled menu items

Tambahkan .disabled pada <li> untuk menonaktifkan link di menu dropdown
Contoh penerapannya:
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li class="disabled"><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>
Hasilnya:
Sementara itu dulu yang kita pelajari. Selanjutnya kita akan mempelajari Button Groups. Silahkan baca disini. Selamat belajar.

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 23:42

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi