Daftar Menurun CSS
- Hal Sebelumnya Barru Navigasi Horizontal CSS
- Hal Berikutnya Galeri Gambar CSS
Membuat daftar menurun yang dapat ditempatkan dengan CSS.
Demos: Kasus menu menurun
Contoh
Pindahkan penanda mouse ke contoh di bawah ini:
Menu menurun dasar
Membuat kotak menurun muncul saat pengguna memindahkan tetikus ke 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>Lewat ke sini saya</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Contoh penjelasan:
HTML
Buka konten menu menurun dengan menggunakan apapun elemen, seperti elemen <span> atau tombol.
Membuat konten menu menurun dengan menggunakan elemen kontainer (seperti <div>) dan tambahkan konten apapun di dalamnya.
Lingkarkan elemen-elemen ini dengan elemen <div> menggunakan CSS penempatan yang benar untuk menempatkan konten menu menurun.
CSS
.dropdown kelas position:relativeketika kami ingin menempatkan konten menurun di bawah tombol menurun (gunakan position:absolute)diperlukan untuk kelas ini.
.dropdown-content Kelas menyimpan konten menu menurun yang sebenarnya. Secara standar ia disembunyikan dan akan muncul saat bergerak ke atas (lihat di bawah). Perhatikan bahwamin-width Ditetapkan menjadi 160px. Dapat disesuaikan kapan saja. Tips: Jika Anda ingin lebar konten menurun sama dengan lebar tombol menurun, atur lebar menjadi 100% (atur overflow:auto Dapat dijalankan dengan penyesuaian penarikan di layar kecil.
Kami menggunakan CSS box-shadow atribut, bukan garis, sehingga menu dropdown terlihat seperti kartu.
Ketika pengguna memindahkan mouse ke tombol dropdown,:hover Pemilih untuk menampilkan menu dropdown.
Menu dropdown
Buat menu dropdown dan izinkan pengguna untuk memilih opsi dari daftar:
Contoh ini mirip dengan contoh sebelumnya, kecuali kami menambahkan tautan di dalam kotak dropdown dan menata gaya nya untuk cocok dengan tombol dropdown:
Contoh
<style>
/* Menentukan gaya tombol dropdown */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Kontainer <div> - memasang konten dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* Konten dropdown (dihide secara 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;
}
/* Link dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Mengubah warna link saat dihover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Menampilkan menu dropdown saat dihover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Menampilkan konten dropdown saat dihover, ubah warna latar belakang tombol dropdown */
.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 menu turun yang berposisi kanan
Jika ingin menu turun bergerak dari kanan ke kiri daripada dari kiri ke kanan, tambahkan right: 0;：
Contoh
.dropdown-content {
right: 0;
}
Beberapa Contoh Lain
1 - Gambar Turun
Bagaimana menambahkan gambar dan konten lain di dalam kotak turun.
Tahapkan penanda penunjuk mouse di atas gambar:
2 - Navigasi Turun
Bagaimana menambahkan menu turun di bawah navigasi.
- Hal Sebelumnya Barru Navigasi Horizontal CSS
- Hal Berikutnya Galeri Gambar CSS
