Cara Membuat Dropdown Hover Bootstrap 4

07/06/2018    Risman Hakim    44     Website

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 :)

Web Design, HTML CSS, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More