menu drop-down CSS
Gunakan CSS untuk membuat tampilan setelah pindah mouse pada efek menu drop-down.
Contoh menu drop-down
Contoh Demo 1
tutorial ini
www.w3big.com
Contoh Demo 2
Contoh Demo 3
menu drop-down dasar
Ketika mouse dipindahkan ke elemen yang ditentukan, akan drop down menu muncul.
contoh
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-konten {
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-konten {
display: block;
}
</ Style>
<Class Div = "dropdown">
<Span> Mouse me </ span>
<Class Div = "dropdown-konten ">
<P> Hello World! </ P>
</ Div>
</ Div>
Coba »
Contoh analisis
bagian HTML:
Kami dapat menggunakan salah HTM, unsur-unsur untuk membuka menu drop-down, seperti: <span>, atau <button> elemen.
Gunakan elemen kontainer (misalnya: <div>) untuk membuat menu dropdown dan ditempatkan di manapun Anda ingin menempatkan pada.
Gunakan elemen <div> untuk membungkus elemen-elemen ini, dan menggunakan CSS untuk mengatur isi dari gaya tarik-turun.
CSS bagian:
.dropdown kelas menggunakan position:relative , yang akan mengatur konten menu dropdown ditempatkan di tombol drop-down (menggunakan position:absolute ) di posisi pojok kanan bawah.
.dropdown-content kelas adalah menu drop-down yang sebenarnya. Tersembunyi secara default, akan muncul dalam mouse dipindahkan ke elemen tertentu setelah. Perhatikan bahwa min-width nilai diatur ke 160px. Anda dapat dengan bebas memodifikasi. Catatan: Jika Anda ingin mengatur drop-down dan tombol konten broadband konsisten tarik-turun, mengatur width untuk% 100 ( overflow:auto pengaturan dapat menggulir ukuran kecil layar).
Kami menggunakan box-shadow properti memungkinkan menu drop-down yang terlihat seperti "kartu."
:hover pemilih untuk menu drop-down pengguna akan muncul ketika mouse digerakkan ke tombol drop-down.
menu drop-down
Membuat menu drop-down, dan memungkinkan pengguna untuk memilih item dalam daftar:
Contoh sebelumnya dari contoh serupa, ketika kita menambahkan link dalam daftar drop-down, dan mengatur gaya:
contoh
/ * Style tombol drop-down * /
.dropbtn {
background-color: # 4CAF50;
warna: putih;
padding: 16px;
font-size: 16px;
border: none;
kursor: pointer;
}
/ * Kontainer <div> - Anda perlu mencari isi drop-down * /
.dropdown {
position: relative;
display: inline-block;
}
/ * Konten Pulldown (tersembunyi secara default) * /
.dropdown-konten {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px RGBA (0,0,0,0.2);
}
/ * Menu link drop-down * /
.dropdown-konten sebuah {
warna: hitam;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Mengikuti menu Edit melayang warna link tarik-turun * /
.dropdown-konten a: hover {background -warna: # f1f1f1}
/ * Setelah Tampilkan drop-down menu melayang * /
.dropdown: hover .dropdown-konten {
display: block;
}
/ * Ketika isi dari drop-down setelah tombol drop-down menampilkan warna latar belakang yang dimodifikasi * /
.dropdown: hover .dropbtn {
background-color: # 3e8e41;
}
</ Style>
<Class Div = "dropdown">
<Tombol class = "dropbtn"> menu tarik-turun </ button>
<Class Div = "dropdown-konten ">
<A Href = "#"> tutorial ini 1 </ a>
<A Href = "#"> tutorial ini 2 </ a>
<A Href = "#"> tutorial ini 3 </ a>
</ Div>
</ Div>
Coba »
konten dropdown keselarasan
float: kiri;
float: right;
Jika Anda ingin mengatur menu drop-down mengambang konten yang tepat dari kanan ke kiri bukan kiri ke kanan, Anda dapat menambahkan kode berikut right: 0;
contoh yang lebih
Gambar drop-down
Contoh ini menunjukkan bagaimana untuk menambahkan gambar tentang bagaimana menu pull-down.
Drop down menu
Contoh ini menunjukkan bagaimana untuk menambahkan menu drop-down pada bar navigasi.