Cara menggunakan dropdown hover bootstrap 5

Question

after browing through google I finally found a way to make hover dropdown menu bootstrap. I never thought I would be this easy . The following hover feature to activate the dropdown menu in the bootstrap

Table of Contents Show

Dropdown Bootstrap 4
Membuat Dropdown Dengan Bootstrap 4
Split Button Dropdown
Arah Konten
TUTORIAL MENARIK LAINNYA
Tutorial Bootstrap 4 #35 : Border Bootstrap 4
Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4
Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

Add a line on css

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

very easy right?

Thanks Bootstrap & Joostrap

        
            
      
        
          Dropdown button
        
        

          Action
          Another action
          Something else here

        
            
      .dropdown:hover>.dropdown-menu {
        display: block;
      }
      
      .dropdown>.dropdown-toggle:active {
        /*Without this, clicking will make it sticky*/
          pointer-events: none;
      }

Masih membahas tentang komponen-komponen dan plugin yang disediakan di bootstrap 4. komponen yang akan dibahas pada tutorial bootstrap 4 bagian ke 19 ini adalah komponen atau plugin Dropdown pada bootstrap.

Bootstrap telah menyediakan komponen dropdown. dan cara membuatnya pun cukup mudah. seperti komponen-komponen bootstrap 4 lainnya yang sudah kita bahas pada tutorial-tutorial bootstrap 4 sebelumnya.

Kita tinggal menggunakan class-class yang sudah tersedia.

Dropdown yang akan dibahas di sini seperti menu dropdown, namun bukan berbentuk menu navigasi, melainkan dibuat menggunakan tombol. jadi tombol yang akan kita buat memiliki navigasi dropdown.

Pada saat tombol tersebut diklik, maka akan menampilkan konten atau list link seperti menu dalam bentuk dropdown.

Dropdown pada bootstrap dibuat menggunakan library pihak ketiga, yaitu Popper.js.

Itulah sebabnya selain menghubungkan css dan js bootstrap, kita perlu meng-include atau menghubungkan juga popper.min.js ke halaman kerja kita.

Seperti yang sudah kita bahas pada Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4.

Langsung saja kita masuk ke contohnya.

Persiapan

Pastikan teman-teman sudah mengerti cara menghubungkan halaman dengan file css dan file js bootstrap 4.

Jika belum silahkan teman-teman baca tutorial sebelumnya dulu tentang cara menggunakan bootstrao 4.

Contoh kerangka kerja setelah dihubungkan dengan bootstrap, jquery dan popper.js.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!doctype html>

<html>

<head>

<title>Tutorial Membuat Dropdown Dengan Bootstrap 4 - www.malasngoding.com</title>

</head>

<body>

</body>

</html>

Untuk membuat dropdown menggunakan tombol bootstrap, perhatikan contoh berikut.

1

2

3

4

5

6

7

8

9

10

Tutorial

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

</div>

Seperti contoh dropdown di atas, isi dari konten yang ingin teman-teman tampilkan pada bagian dropdown nya bisa teman-teman letakkan di dalam class .dropdown-menu seperti di atas, pada contoh ini isi konten dropdownnya kita isi dengan tiga buah link, yaitu HTML, Bootstrap 4 dan CodeIgniter.

Pemicu dropdownnya adalah tombol yang kita buat dengan elemen <button> .. </button>.

Teman-teman juga bisa menggunakan elemen <a> .. </a> jika mau.

Oke sekarang kita lihat hasilnya dulu. silahkan jalankan pada browser.

dropdown bootstrap 4

Contoh tombol di atas kita buat dengan class .btn-primary, sehingga warna tombolnya berwarna biru.

Silahkan teman-teman sesuaikan jika ingin diubah. untuk membuat tombol juga sudah kita pelajari pada tutorial sebelumnya, Silahkan baca lagi Tutorial Bootstrap 4 #14 : Tombol Bootstrap 4.

Berikut full source code nya.

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>Tutorial Membuat Dropdown Dengan Bootstrap 4 - www.malasngoding.com</title>

</head>

<body>

<h3>Tutorial Membuat Dropdown Dengan Bootstrap 4</h3>

<h4><a href="https://www.malasngoding.com/dropdown-bootstrap-4/">www.malasngoding.com</a></h4>

</center>

<br/>

Tutorial

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

</div>

</body>

</html>

Contoh tombol dropdown di atas adalah single button. Bootstrap juga menyediakan split button. jadi tombol akan terbagi 2 atau ada 2 tombol.

Tombol biasa dan tombol yang berbentuk panah, konten dropdownnya akan tampil jika yang diklik pada tombol panah. Perhatikan contoh berikut.

1

2

3

4

5

6

7

8

9

10

11

12

13

<span class="sr-only">Toggle Dropdown</span>

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/web-design">Web Design</a>

</div>

Dan hasilnya seperti berikut saat dijalankan.

split button dropdown bootstrap 4

Arah Konten

Contoh di atas akan menanpilkan konten ke arah bawah pada saat tombol di klik, kita juga bisa menentukan arah kontennya pada saat tampil ke kanan (dropright), kiri (dropleft), atas (dropup) atau bawah (dropdown).

Dropright

Untuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropright pada bagian class .btn-group.

Contoh

1

2

3

4

5

6

7

8

9

10

11

12

13

<span class="sr-only">Toggle Dropdown</span>

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/web-design">Web Design</a>

</div>

Hasilnya

dropright

Dropleft

Untuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropleft pada bagian class .btn-group.

Contoh

1

2

3

4

5

6

7

8

9

10

11

12

13

<span class="sr-only">Toggle Dropdown</span>

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/web-design">Web Design</a>

</div>

Hasilnya

dropleft

Dropup

Untuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropup pada bagian class .btn-group.

Contoh

1

2

3

4

5

6

7

8

9

10

11

12

13

<span class="sr-only">Toggle Dropdown</span>

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/web-design">Web Design</a>

</div>

Hasilnya seperti berikut

dropup

Dropdown

Contoh

1

2

3

4

5

6

7

8

9

10

11

12

13

<span class="sr-only">Toggle Dropdown</span>

</button>

<a class="dropdown-item" href="https://www.malasngoding.com/category/bootstrap-4">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/codeigniter">CodeIgniter</a>

<a class="dropdown-item" href="https://www.malasngoding.com/category/web-design">Web Design</a>

</div>

Hasilnya seperti berikut

dropdown

Penutup

Selangkapnya jika teman-teman ingin membaca lebih luas lagi tentang dropdown bootstrap 4, teman-teman bisa membacanya di sini https://getbootstrap.com/docs/4.3/components/dropdowns/.

Silahkan lihat demo dan download source codenya pada link berikut.

Download Source Code

Demo

Incoming search terms:

membuat drop down multi level
tombol drop down bootstrap
kode class drop-down di bootstrap
Tutorial Bootstrap 4 #19 :
membust bootrsap 4 select box
mwmbuat select box bootsrap 4
drop down tidak jalan di ci
cara menggunakan dropdown pada bootstrap
bootstrap option menu
cara install bootstrap 4 select

SHARE :

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Author's profile
All posts by Diki Alfarabi Hadi

Tags: bootstrap 4 button group, bootstrap 4 dropdown, bootstrap 4 dropdown button, bootstrap dropdown menu submenu, bootstrap dropdown select, btn toggle split, cara membuat dropdown bootstrap 4, dropdown, dropdown bootstrap 3, dropdown bootstrap 4 not working, dropdown hover bootstrap 4, dropdown menu, dropleft, dropright, dropup, multi level dropdown bootstrap 4, navbar dropdown bootstrap, tombol dropdown bootstrap

Produk

Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
Source Code Toko Sport PHP dan MySQLi Rp 200,000
Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000

Tutorial Terbaru

Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
Membuat QR Code Dengan PHP August 3, 2022

Toko Kami

SOCIAL

Malas Ngoding

TUTORIAL MENARIK LAINNYA

Bootstrap 4

Tutorial Bootstrap 4 #35 : Border Bootstrap 4

22 October 2019

Border Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu ...

Diki Alfarabi Hadi

Bootstrap 4

Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4

13 September 2019

Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ...

Diki Alfarabi Hadi

Bootstrap 4

Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

9 September 2019

Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ...

Diki Alfarabi Hadi

Bootstrap 4

Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

7 September 2019

Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ...

kode bootstrap