Wie erstelle ich ein Dropdown-Menü mit Bildern statt Text?

Dropdown-Auswahl mit Bildern

Sie möchten eine Dropdown-Auswahl erstellen, die Bilder anstelle von Text anzeigt. Obwohl die jQuery-Combobox oft empfohlen wird, ist dafür immer noch Text neben den Bildern erforderlich.

Lösung: Text durch Bilder ersetzen

Überraschenderweise können Sie dieses Dropdown-Menü auch ohne JavaScript erreichen ! So geht's:

HTML-Struktur

Verwenden Sie Optionsfelder und Beschriftungen:

<div>

CSS-Styling

Stilen Sie sie mit CSS. Blenden Sie die Optionsfelder aus, gestalten Sie die Beschriftungen so, dass sie wie Dropdown-Optionen aussehen, und erweitern Sie das Dropdown-Menü, wenn Sie mit der Maus darüber fahren.

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

Funktionalität

Optionsfelder sind mit Beschriftungen verknüpft sodass durch Klicken auf eine Beschriftung das entsprechende Optionsfeld aktiviert wird. Wenn Sie mit der Maus über das Dropdown-Menü fahren, wird es erweitert und zeigt alle Bildoptionen an. Das ausgewählte Bild bleibt auch im minimierten Zustand sichtbar.

Beispiel

Das vollständige Beispiel finden Sie unter: http://jsfiddle.net/NDCSR/1/

Implementierungsdetails

• Verwenden Sie es mit absoluter Positionierung innerhalb eines Containers mit relativer Positionierung und hohem Z-Index.
• Für verschiedene Linienstile verwenden Sie ein einzigartiges Hintergrundbild für jedes Etikett basierend auf seinem „for“-Attribut.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Dropdown-Menü mit Bildern statt Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!