Tutorial CSS - Membuat Dropdown

Membuat Dropdown dengan CSS

Dropdown adalah sebuah tampilan yang disembunyikan dan akan muncul ketika ada sebuah aksi (hover).

Dropdown biasa digunakan untuk membuat sebuah tab menu yang memiliki banyak anak menu sehingga tampilan web akan menjadi lebih rapih dan bersih.

Basic Dropdown

Sebagai dasar saya akan membuat sebuah tampilan dropdown yang akan tampil ketika user mengarahkan kursor diatas elemen teks.

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Dropdown</title>
  <style>
  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #73c8c3;
      width: 100%;
      box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }
  </style>
  </head>
  <body>
  <div class="dropdown">
    <span>Arahkan Kursor Kesini</span>
    <div class="dropdown-content">
      <p>Hello World!</p>
    </div>
  </div>
  </body>
</html>

Perhatikan pada kode CSS ".dropdown:hover .dropdown-content", kode hover digunakan untuk membuat aksi ketika kursor berada diatas sebuah elemen.

Pada selector class ".dropdown-content" berisi pengaturan untuk membuat tampilan dropdown.

Pada contoh tersebut elemen <div> dengan class "dropdown-content" disembunyikan dan akan tampil ketika kursor diarahkan diatas elemen <span>.

Dropdown Menu

Dropdown menu biasa digunakan pada tab menu halaman web yang berisi anak menu dari menu utama untuk memudahkan user dalam mencari halaman.

Contoh


<!DOCTYPE html>
<html>
  <title>Membuat Dropdown Menu</title>
<head>
<style>
.dropbtn {
    background-color: #6660da;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ebebeb}

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

.dropdown:hover .dropbtn {
    background-color: #534dc6;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Arahkan kursor diatas tombol Dropdown</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Dropdown Image

Selain teks, gambar juga dapat dimasukkan kedalam box dropdown. Berikut contoh memasukkan gambar kedalam box dropdown yang bisa digunakan untuk membuat sebuah galeri foto/gambar.


<!DOCTYPE html>
<html>
<head>
  <title>Membuat Dropdown Image</title>
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #8ae3ff;
    min-width: 160%;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
}

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

.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<h2>Dropdown Image</h2>
<p>Arahkan kursor diatas gambar</p>

<div class="dropdown">
  <img src="saitama-opm.png" alt="saitama-opm" width="auto" height="50">
  <div class="dropdown-content">
    <img src="saitama-opm.png" alt="saitama-opm" width="auto" height="200">
    <div class="desc">Saitama - One Punch Man</div>
  </div>
</div>

</body>
</html>

Dari ketiga contoh diatas anda dapat mengembangkannya untuk membuat tampilan dropdown yang lebih menarik dan fungsional. Anda dapat mengimplementasikannya kedalam project web anda untuk menambah desain web menjadi lebih bagus dan menarik.

Jika anda baru latihan membuatnya, cobalah untuk mengkreasikan desain dari contoh diatas seperti merubah teks, warna, gambar, dan ukuran.

Sekian tutorial cara membuat Dropdown dengan CSS. Jika ada yang ditanyakan silakan tulis di kolom komentar.

Terimakasih.