Cara Membuat Dropdown Hover Bootstrap 4

Cara Membuat Dropdown Hover Bootstrap 4 - Didalam Bootstrap terdapat dropdown yang bisa kita gunakan untuk membuat menu pada website. Namun ada kalanya dropdown pada bootstrap tidak sesuai dengan yang kita inginkan, misalnya saja ketika kita ingin membuat desain dropdown, warna, dan efek yang lainnya, untuk itu kita harus mengubah style atau menambahkan sintak CSS pada bootstrap nya. Nah, Pada kesempatan kali ini saya akan bagikan tutorial mengubah efek dropdown yakni bagaimana Cara Membuat Dropdown Hover Bootstrap 4. Berikut langkah - langkah Cara Membuat Dropdown Hover Bootstrap 4.

Langkah 1 : Cara Membuat Dropdown Hover Bootstrap 4

Langkah pertama siapkan file Bootstrap nya, jika tidak ada kalian bisa download pada halaman Bootstrap nya. Setelah itu kita mulai ketikan sintak atau menambahkan class pada file index.html untuk membuat dropdown seperti berikut ini.

<div class="container">
    <div class="row">
        <div class="col-md-4">

            <!-- Dropdown -->
            <div class="dropdown">
              <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>

        </div>
    </div>
</div>

Langkah 2 : Cara Membuat Dropdown Hover Bootstrap 4

Setelah membuat dropdown seperti diatas, langkah berikutnya adalah mendesain dan mengubah sedikit sintak CSS untuk menjadikan dropdown hover, silahkan kalian buat satu file style kemudian tambahkan style CSS seperti berikut.

<style type="text/css">
    .container {
        margin-top: 30px;
    }
    .dropdown-toggle,
    .dropdown-menu {
        border-radius: 0px !important;
    }
    .dropdown-item:hover {
        color: white;
        background-color: #dc3545;
    }
    .btn-danger {
        width: 55%;
    }
    .dropdown:hover>.dropdown-menu {
      display: block;
    }
</style>

Setelah sintak ditatas telah diketikan semua, pastikan filenya telah tersimpan, selanjutnya silahkan buka pada browser masing - masing untuk melihat hasil akhir dari dropdown menu nya. Maka tampilan akhir dropdown hover akan sperti gambar dibawah ini.

Cara Membuat Dropdown Hover Bootstrap 4

Baik, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Dropdown Hover Bootstrap 4, semoga tutorial ini bisa bermanfaat sampai jumpa ditutorial berikutnya, selamat mencoba :)

7 Juni 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat