Cara Membuat Split Button Dropdown

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat dropdown tombol split dengan menggunakan CSS.

Split Button Dropdowns

Arahkan kursor ke ikon panah untuk membuka menu dropdown:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

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

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

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

.btn:hover, .dropdown:hover .btn {
  background-color: #0b7dda;
}
</style>
</head>
<body>

<h2>Contoh Split Button Dropdowns</h2>
<p> Arahkan mouse ke atas ikon panah untuk membuka menu dropdown. </p>
  
<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid #0d8bf2">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Cara Membuat Split Button

Langkah 1) Tambahkan HTML:
Buat menu tarik-turun yang muncul saat pengguna menggerakkan mouse ke atas ikon.

Contoh

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid navy">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Contoh Dijelaskan

Gunakan elemen apa pun untuk membuka menu dropdown, mis. elemen <button>, <a> atau <p>.
Gunakan elemen container (seperti <div> ) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.
Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu dropdown dengan benar dengan CSS

Langkah 2) Tambahkan CSS:
Contoh

/* Dropdown Button */
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

/* Container <div> - diperlukan untuk memposisikan konten dropdown */
.dropdown {
  position: absolute;
  display: inline-block;
}

/* Konten Dropdown (Disembunyikan secara Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

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

/* Ubah warna tautan dropdown saat mengarahkan kursor */
.dropdown-content a:hover {background-color: #ddd}

/* Tampilkan menu dropdown saat mengarahkan kursor */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Ubah warna latar belakang tombol dropdown saat konten dropdown ditampilkan */
.btn:hover, .dropdown:hover .btn  {
  background-color: #0b7dda;
}