Wie kann ich ein Dropdown-Menü erstellen, das Bilder anstelle von Text anzeigt?

Anzeigen von Bildern in Dropdown-Optionen

Das Erstellen einer Dropdown-Auswahl, die Bilder anstelle von Text enthält, kann sich als Herausforderung erweisen. Obwohl die jQuery-Combobox vorgeschlagen wurde, basiert sie auf der Bereitstellung von Textoptionen mit Bildern. Um Text vollständig durch Bilder zu ersetzen, ist ein anderer Ansatz erforderlich.

Eine clevere CSS-Lösung

Für diesen speziellen Anwendungsfall, bei dem die Bilder Linienstärken in einem Online-Format darstellen Mal-App, kein JavaScript erforderlich. Stattdessen können wir Optionsfelder und CSS nutzen, um den gewünschten Effekt zu erzielen.

HTML-Struktur

<div>
<p><strong>CSS-Styling</strong></p>
<pre class="brush:php;toolbar:false">#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;
}

Wie es funktioniert

Der Trick liegt in der Assoziation Beschriftungen mit Optionsfeldern unter Verwendung der Attribute „for“ und „id“. Wenn auf eine Beschriftung geklickt wird, wird das entsprechende Optionsfeld aktiviert. Das CSS-Styling stellt sicher, dass:

• Im minimierten Zustand ist nur die Beschriftung des ausgewählten Optionsfelds sichtbar.
• Wenn das Dropdown-Menü erweitert wird (beim Bewegen des Mauszeigers), werden alle Beschriftungen angezeigt.
• Beschriftungen nach aktivierten Optionsfeldern bleiben auch im minimierten Zustand sichtbar.

Durch die Zuweisung von Hintergrundbildern zu Beschriftungen werden die Dropdown-Optionen werden als Bilder angezeigt. Dieser Ansatz ersetzt effektiv Text durch Bilder und erreicht die gewünschte Funktionalität ohne JavaScript.