Hallo sahabat Dumetschool, dalam kesempatan ini saya akan membahas tentang Cara Sederhana Membuat Dropdown Hover Menggunakan Bootstrap 4. Sahabat tentu tidak asing lagi jika sudah menggunakan Bootstrap ya. Karena disini menggunakan Bootstrap tentu sangat dimanjakan dalam membuatnya. Kenapa bisa begitu tentu kita hanya tinggal mencari layout navbar pada kolom pencarian. Sahabat ketikkan saja navbar kemudian cari tampilan yang ada dropdownnya. Jadi saat kita pilih navbar dropdown kita harus melakukan klik terlebih dahulu untuk melihat submenu. Nah disini saya akan membuat berbeda dengan cara di hover menu dropdownnya. Oke langsung saja kita buat seperti langkah dibawah ini:

Pertama, sahabat silahkan membuat file HTML lalu ketikkan code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  
</head>
<body>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

pada code diatas adalah struktur awal atau template dari bootstrap.

Langkah kedua yaitu tambahkan code dibawah ini untuk bagian navbar :

<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav justify-content-center">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">First Product</a>
          <a class="dropdown-item" href="#">Second Product</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Third Product</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">HELP</a>
      </li>
    </ul>
    
  </div>
</nav>

Jika sudah silahkan simpan terlebih dahulu. Untuk memberikan efek hover tambahkan style CSS berikut ini:

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

OKe simpan kembali filenya, kemudian buka browser masing masing dan lihat hasilnya seperti tampilan dibawah ini:

Cara-Membuat-Dropdown-Hover-Menggunakan-Bootstrap 4-edi-140220

Saya kira cukup dalam pembahasan kali ini Cara Membuat Dropdown Hover Menggunakan Bootstrap 4 , sampai jumpa dalam pembahasan lainnya dan selamat mencoba.

WhatsApp chat