Bagaimana untuk Mencipta Menu Dropdown dengan Imej Daripada Teks?

Pemilihan Turun Turun dengan Imej

Anda ingin membuat pilihan lungsur turun yang memaparkan imej dan bukannya teks. Walaupun kotak kombo jQuery sering dicadangkan, ia masih memerlukan teks bersama imej.

Penyelesaian: Gantikan Teks dengan Imej

Anehnya, anda boleh mencapai menu lungsur ini tanpa JavaScript ! Begini caranya:

Struktur HTML

Gunakan butang radio dan label:

<div>

Penggayaan CSS

Gayakannya menggunakan CSS. Sembunyikan butang radio, gayakan label supaya kelihatan seperti pilihan lungsur turun dan buat menu lungsur berkembang pada tuding.

#image-dropdown {
    /* Style the "box" in its minimized state */
    ...
}
#image-dropdown:hover {
    /* When expanded, the dropdown will get native means of scrolling */
    ...
}
#image-dropdown input {
    /* Hide the nasty default radio buttons */
    ...
}
#image-dropdown label {
    /* Style the labels to look like dropdown options */
    ...
}
...
#image-dropdown input:checked + label {
    /* Make the selected option visible in the collapsed menu */
    ...
}

Fungsi

Butang radio dipautkan ke label supaya mengklik label mengaktifkan butang radio yang sepadan. Apabila anda menuding pada menu lungsur, ia mengembang, menunjukkan semua pilihan imej. Imej yang dipilih kekal kelihatan walaupun dalam keadaan runtuh.

Contoh

Lihat contoh penuh di: http://jsfiddle.net/NDCSR/1/

Butiran Pelaksanaan

• Gunakannya dengan kedudukan mutlak dalam bekas dengan kedudukan relatif dan indeks z tinggi.
• Untuk gaya garisan yang berbeza, gunakan imej latar belakang yang unik untuk setiap label berdasarkan atribut "untuk".

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Dropdown dengan Imej Daripada Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!