How To

Cara Membuat Dropup

Belajar cara membuat menu dropup dengan CSS.

Menu dropup adalah menu toggleable yang memungkinkan pengguna memilih satu nilai dari daftar yang telah ditentukan sebelumnya.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

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

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

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

.dropup-content a:hover {background-color: #ccc}

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

.dropup:hover .dropbtn {
  background-color: #2980B9;
}
</style>
</head>
<body>

<h2>Drop-Up yang Dapat Diarahkan</h2>
<p>Contoh text...</p>
<p>Contoh text...</p>
<p>Gerakkan mouse ke atas tombol untuk membuka menu dropup.</p>

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

</body>
</html>

Cara membuat Dropup yang Dapat Diarahkan

Buat menu drop-up yang muncul saat pengguna menggerakkan mouse ke atas sebuah elemen.

Langkah 1) Tambahkan HTML

Contoh:

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

Penjelasan Contoh

Gunakan elemen apa pun untuk membuka menu dropup, misalnya <button>, elemen <a> atau <p>.

Gunakan elemen penampung (seperti <div>) untuk membuat menu drop-up dan menambahkan link dropup di dalamnya.

Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu dropup dengan benar dengan CSS.

Langkah 2) Tambahkan CSS

Contoh:

/* Tombol Dropup */.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* Wadah <div> - diperlukan untuk memposisikan konten dropup */.dropup {
  position: relative;
  display: inline-block;
}

/* Konten dropup (Disembunyikan secara Default) */.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

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

/* Ubah warna background tombol drop-up saat konten dropup ditampilkan */.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Penjelasan Contoh:

Kami telah memberi style pada tombol dropup dengan warna background, padding, dan lain-lain.

Kelas .dropup menggunakan position: relative, yang diperlukan ketika kita ingin konten dropup ditempatkan di atas tombol dropup (menggunakan position: absolute).

Kelas .dropup-content menyimpan menu dropup yang sebenarnya. Itu tersembunyi secara default, dan akan ditampilkan saat hover (lihat di bawah). Perhatikan min-width diatur ke 160px. Silakan ubah ini. Tips: Jika Anda ingin lebar konten dropup menjadi selebar tombol dropup, setel lebar ke 100% (dan overflow: auto untuk mengaktifkan scroll di layar kecil).

Alih-alih menggunakan border, kami telah menggunakan properti box-shadow untuk membuat menu drop-up terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropup di depan elemen lainnya.

Selector :hover digunakan untuk menampilkan menu drop-up saat pengguna menggerakkan mouse ke atas tombol drop-up.


Catur Kurnia Sari

Share
Tags: How To