首頁  >  文章  >  web前端  >  如何使用圖像而不是文字建立下拉式選單?

如何使用圖像而不是文字建立下拉式選單?

Patricia Arquette
Patricia Arquette原創
2024-11-08 11:42:02404瀏覽

How to Create a Dropdown Menu with Images Instead of Text?

帶有圖像的下拉選擇

您希望建立一個顯示圖像而不是文字的下拉選擇。雖然經常建議使用 jQuery 組合框,但它仍然需要在圖像旁邊添加文字。

解決方案:用圖像替換文字

令人驚訝的是,您可以在沒有 JavaScript 的情況下實現此下拉式選單!操作方法如下:

HTML 結構

使用單選按鈕和標籤:

<div>

CSS 樣式

使用CSS 設定它們的樣式。隱藏單選按鈕,將標籤設定為看起來像下拉選項,並使下拉式選單在懸停時展開。

#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 */
    ...
}

功能

單選按鈕連結到標籤這樣點選標籤就會啟動對應的單選按鈕。當您將滑鼠懸停在下拉清單上時,它會展開,顯示所有圖像選項。即使在折疊狀態下,所選影像仍然可見。

範例

看完整範例:http://jsfiddle.net/NDCSR/1/

實作詳細資訊

  • 在具有相對定位和高z-index 的容器內使用絕對定位。
  • 對於不同的線條樣式,為每個基於標籤的標籤使用唯一的背景圖像在其「for」屬性上。

以上是如何使用圖像而不是文字建立下拉式選單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn