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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Pembuatan Dropdown Menu</h2> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Tombol Dropdown </button> <div class="dropdown-menu"> <div class="dropdown-header">Contoh header Dropdown</div> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item active" href="#">Link 3</a> <a class="dropdown-item disabled" href="#">Link 4</a> </div> </div> </div> </body> </html> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dropdown Menu Pada posisi kanan</h2> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Tombol Dropdown </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> <br/> <hr/> <h2>Dropdown Menu Pada posisi kiri</h2> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Tombol Dropdown </button> <div class="dropdown-menu dropdown-menu-left"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> </div> </body> </html> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <br/> <br/> <br/> <br/> <div class="container"> <h2>Dropup Menu</h2> <div class="dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Tombol Dropup </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> </div> </body> </html> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Split Dropdown</h2> <hr/> <div class="btn-group"> <button type="button" class="btn btn-primary">Menu</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Sub Menu 1</a> <a class="dropdown-item" href="#">Sub Menu 2</a> </div> </div> </div> </body> </html> |
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.
wah lengkap sekali.. asik mas membacanya saya.. terimakasih banyak ya
alhamdulilah jika membantu mas, ya mas sama sama 😀
Informasi ini sangat membantu.