Cara membuat: Menu menarik ke atas

Belajar cara membuat menu menarik ke atas dengan CSS.

Buat menu menarik ke atas yang dapat dihentikan

Buat menu menarik ke atas, yang akan muncul saat pengguna menggerakkan mouse ke elemen.

Langkah pertama - Tambahkan HTML:

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

Contoh penjelasan:

Dapat digunakan elemen apapun untuk membuka menu menarik ke atas, seperti elemen <button>, <a> atau <p>.

Gunakan elemen wadah (seperti <div>) untuk membuat menu menarik ke atas, dan tambahkan tautan menarik ke atas didalamnya.

Gunakan elemen <div> untuk melingkapi tombol dan <div>, sehingga dapat memposisikan menu menarik ke atas dengan CSS.

Langkah kedua - Tambahkan CSS:

/* Tombol tarik turun */
.dropbtn {
  background-color: #3498DB;
  color: putih;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Kontainer <div> - digunakan untuk menempatkan elemen yang diperlukan untuk memosisikan konten menu geser */
.dropup {
  position: relative;
  display: inline-block;
}
/* Konten menu geser (dihidupkan 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;
}
/* Link di menu geser */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Mengubah warna link saat mouse ditempatkan */
.dropup-content a:hover {background-color: #ddd}
/* Menampilkan menu geser saat mouse ditempatkan */
.dropup:hover .dropup-content {
  display: block;
}
/* Mengubah warna latar belakang tombol geser saat konten menu geser muncul */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Coba sendiri

Contoh penjelasan:

Kami menetapkan gaya warna latar belakang, margin dalam, dan lainnya untuk tombol geser.

.dropup kelas menggunakan position:relativekita ingin menempatkan konten menu geser di atas tombol geser (menggunakan position:absolutedibutuhkan.).

.dropup-content Kelas mengandung menu geser yang sebenarnya. Ini adalah yang disembunyikan secara default dan akan muncul saat mouse ditempatkan (lihat di bawah). Perhatikan, lebar minimum disetel menjadi 160px. Anda dapat mengubah nilai ini sesuai kebutuhan. Tips: Jika Anda ingin lebar konten menu geser sama dengan tombol geser, atur lebar menjadi 100% (dan digunakan di layar kecil) overflow:auto untuk mengaktifkan penarikan.).

Kami tidak menggunakan garis bingkai, melainkan menggunakan box-shadow properti, supaya menu geser terlihat seperti kartu. Kita juga menggunakan z-index Letakkan menu geser di depan elemen lain.

:hover :hover