Bagaimanakah saya boleh membuat menu lungsur turun yang memaparkan imej dan bukannya teks?

Patricia Arquette
Lepaskan: 2024-11-08 05:23:02
asal
865 orang telah melayarinya

How can I create a dropdown menu that displays images instead of text?

Memaparkan Imej dalam Pilihan Jatuh Turun

Membuat pilihan lungsur turun yang menampilkan imej dan bukannya teks boleh terbukti mencabar. Walaupun kotak kombo jQuery telah dicadangkan, ia bergantung pada penyediaan pilihan teks yang disertakan dengan imej. Untuk menggantikan teks sepenuhnya dengan imej, pendekatan berbeza diperlukan.

Penyelesaian CSS Pintar

Untuk kes penggunaan khusus ini, di mana imej mewakili ketebalan garisan dalam talian apl lukisan, tiada JavaScript diperlukan. Sebaliknya, kita boleh memanfaatkan butang radio dan CSS untuk mencipta kesan yang diingini.

Struktur HTML

<div>
Salin selepas log masuk

Penggayaan CSS

#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;
}
#image-dropdown:hover {
    height: 200px; 
    overflow-y: scroll;
    transition: height 0.5s;
}
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#image-dropdown label {
    display: none; 
    margin: 2px; 
    height: 46px; 
    opacity: 0.2; 
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;
}
#image-dropdown input:checked + label {
    opacity: 1 !important; 
    display: block;
}
Salin selepas log masuk

Bagaimana Ia Berfungsi

Helahnya terletak pada mengaitkan label dengan butang radio menggunakan atribut "untuk" dan "id". Apabila label diklik, butang radio yang sepadan diaktifkan. Penggayaan CSS memastikan bahawa:

  • Dalam keadaan runtuh, hanya label butang radio yang dipilih kelihatan.
  • Apabila menu lungsur dikembangkan (di tuding), semua label dipaparkan.
  • Label yang mengikuti butang radio yang disemak kekal kelihatan walaupun dalam butang yang runtuh nyatakan.

Dengan memperuntukkan imej latar belakang pada label, pilihan lungsur turun muncul sebagai imej. Pendekatan ini berkesan menggantikan teks dengan imej, mencapai kefungsian yang diingini tanpa JavaScript.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat menu lungsur turun yang memaparkan imej dan bukannya teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan