Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Dropdown CSS


Buat dropdown hoverable dengan CSS.


Demo: Contoh Dropdown

Gerakkan mouse ke contoh di bawah ini:


Dropdown Dasar

Buat kotak dropdown yang muncul saat pengguna menggerakkan mouse di atas elemen.

Contoh

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

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

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Contoh Dijelaskan

HTML) Gunakan elemen apa saja untuk membuka konten tarik-turun, misalnya elemen <span>, atau <button>.

Gunakan elemen penampung (seperti <div>) untuk membuat konten tarik-turun dan tambahkan apa pun yang Anda inginkan di dalamnya.

Bungkus elemen <div> di sekitar elemen untuk memposisikan konten dropdown dengan benar dengan CSS.

CSS) Kelas .dropdownmenggunakan position:relative, yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position:absolute).

Kelas .dropdown-contentmenyimpan konten tarik-turun yang sebenarnya. Itu disembunyikan secara default, dan akan ditampilkan saat mengarahkan kursor (lihat di bawah). Perhatikan bahwa min-widthdiatur ke 160px. Jangan ragu untuk mengubah ini. Tip: Jika Anda ingin lebar konten dropdown selebar tombol dropdown, atur widthke 100% (dan overflow:autountuk mengaktifkan scroll di layar kecil).

Alih-alih menggunakan batas, kami telah menggunakan box-shadowproperti CSS untuk membuat menu tarik-turun terlihat seperti "kartu".

Selector digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse di :hoveratas tombol dropdown.



Menu drop down

Buat menu tarik-turun yang memungkinkan pengguna memilih opsi dari daftar:

Contoh ini mirip dengan yang sebelumnya, kecuali bahwa kami menambahkan tautan di dalam kotak dropdown dan menatanya agar sesuai dengan tombol dropdown bergaya:

Contoh

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<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>

Konten Dropdown rata kanan

Jika Anda ingin menu tarik turun dari kanan ke kiri, alih-alih kiri ke kanan, tambahkan right: 0;

Contoh

.dropdown-content {
  right: 0;
}

Lebih Banyak Contoh

gambar tarik-turun

Cara menambahkan gambar dan konten lain di dalam kotak dropdown.

Arahkan kursor ke gambar:


Navbar tarik-turun

Cara menambahkan menu tarik-turun di dalam bilah navigasi.