Tutorial Belajar Bootstrap 4 Part 16 – Membuat Dropdown menu dengan Bootstrap

Selamat datang di warung belajar, masih dalam seri tutorial bootstrap 4, jika dalam tutorial selanjutnya kita sudah membahas mengenai cara membuat card dengan bootstrap, dalam tutorial ini kita akan membahas cara membuat dropdown menu dengan bootstrap.

Dropdown menu adalah fitur yang akan menampilkan beberapa menu ketika tombol di klik, Bootstrap menyediakan beberapa class yang bisa anda gunakan untuk membuat dropdown menu.

baik kita akan membahasnya satu persatu pada tutorial ini.

 

Cara membuat dropdown Menu bootstrap

Sebagai contoh pembuatan dropdown menu pada bootstrap, silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama dropdown_menu_bootstrap.html, maka hasilnya adalah :

 

Keterangan :

  • Untuk membuat dropdown menu dengan bootstrap, anda perlu membuat tag <div> dan menambahkan class .dropdown seperti yang ada pada line 14
  • didalam tag <div> buatlah tombol dengan tag <button> dan tambahkan class dropdown-toggle, dan buat attribute data-toggle dengan value “dropdown” seperti yang ada pada line 15
  • Lalu buatlah bagian dropdown menu dengan menggunakan tag <div> dan tambahkan class .dropdown-menu seperti pada line 18
  • dalam tag <div> yang menggunakan class .dropdown-menu silahkan tambahkan menu yang ingin ditampilkan sebagai dropdown menu
  • pada line 19 kita menuliskan <div class=“dropdown-header”>Contoh header Dropdown</div> yang digunakan untuk membuat header pada bagian dropdown menu
  • untuk membuat dropdown menu silahkan buat dengan tag <a> dan tambahkan class dropdown-item seperti pada line 20,21, 23,24
  • untuk membuat garis pada dropdown menu silahkan tuliskan skrip <div class=“dropdown-divider”></div>, perhatikan line 22
  • perhatikan line 23, pada menu ke – 3 kita menambahkan class active untuk memberikan highlight pada menu
  • perhatikan line 24, pada menu ke – 4 kita menambahkan class disabled untuk disabled menu

 

 

Mengatur Posisi Dropdown

Anda dapat mengatur posisi dari dropdown dengan menambahkan class pada bagian drop down menu, adapun classnya adalah :

  • dropdown-menu-right digunakan untuk membuat menu disebelah kanan
  • dropdown-menu-left digunakan untuk membuat menu disebelah kiri

Untuk contoh penggunaan skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama dropdown-position.html, hasilnya adalah :

Keterangan :

  • pada bagian dropdown pertama kita menambahkan class dropdown-menu-right sehingga dropdown ditampilkan di sebelah kanan, seperti yang terlihat pada line 18
  • pada bagian dropdown kedua kita menambahkan  class dropdown-menu-left sehingga dropdown ditampilkan di sebelah kiri, seperti yang terlihat pada line 30

 

 

Membuat dropup

Dropup adalah kebalikan dari dropdown, jika dropdown menu akan ditampilkan ke bawah, jika dropup menu akan ditampilkan ke atas, untuk membuat dropup anda hanya perlu mengganti class dropdown menjadi class dropup, untuk contoh penggunaan dropup silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama dropup.html, maka hasilnya adalah  :

Keterangan :

  • Perhatikan pada line 17 kita menambahkan class dropup, agar menu ditampilkan ke arah atas bukan ke bawah.

 

 

Split Dropdown Menu

Berikutnya kita akan membahas mengenai cara membuat split dropdown menu, split dropdown menu adalah pembagian area dari tombol yang digunakan untuk menampilkan label tombol dan bagian tombol yang digunakan untuk menampilkan bagian dropdown.

untuk contoh skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama split_dropdown.html, jika dibuka dibrowser maka hasilnya adalah :

Keterangan :

  • kita harus membuat dulu sebuah tag <div> dengan class btn-group untuk mengelompokkan dari tombol, seperti pada line 14
  • pada line 15 kita buat sebuah tombol yang akan kita gunakan untuk label parent menu
  • pada line 16 kita buat button dengan tambahan class dropdown-toggle dropdown-toggle-split, serta memberikan attribute data-toggle dengan value dropdown
  • pada line 17 kita tulisan tag <span> dengan class caret diantara tag <button> di line 16
  • berikutnya di line 19 kita buat tag <div> dengan class dropdown-menu
  • di line 20 dan 21 kita tuliskan submenunya yang akan ditampilkan ketika parent menunya di klik

 

Baik sekian dulu teman – teman pembahasan mengenai cara membuat dropdown dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial selanjutnya.

Leave a Reply

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