Im Simplease-Blog schreiben wir über Design, Web-Entwicklung und unser Leben als Selbstständige.

Unsere CSSOff Einsendung

Jeder der schonmal versucht hat eine Dropdown-Liste per CSS zu gestalten, wird schnell bemerkt haben, dass dies nur eingeschränkt möglich ist. Mir ist es erst vor kurzem wieder aufgefallen, als ich für unsere Einreichung zum CSSOff Wettbewerb (unmatchedstyle.com) eine spezielle Dropdown-Liste umsetzen musste.

(Das Ergebnis gibt es hier zu sehen.)

Also habe ich mich auf die Suche nach einer Lösung gemacht. Schnell war mir klar, dass es für diesen Zweck bereits einige jQuery Plugins gibt.

Nach zwei bis drei Testversuchen die Ernüchterung: Wie so oft gibt es für bestimmte Anwendungen zwar bereits fertige Plugins, in vielen Fällen sind diese jedoch schlecht umgesetzt oder haben einfach zu viele Funktionen.

Dann muss ich es eben selber machen…

Die Herausforderung dabei war, eine bestehende Dropdown-Liste so mit HTML-Elementen nachzubauen, dass sie beliebig gestaltet werden kann, trotzdem aber die selben Interaktionsmöglichkeiten wie eine Standard Dropdown-Liste bietet. Weiters sollte sie natürlich in so vielen Browsern wie möglich exakt gleich dargestellt werden.

Das Ergebnis …

… ist ein jQuery-Plugin, dass eine oder mehrere Dropdown-Listen in eine newDropdown-Liste umbaut. Und das geht so:

$(ELEMENT).newDropdown(SIZE,DURATION);
 
// ELEMENT: eine oder mehrere Listen
// SIZE: gewünschte Breite
// DURATION: Dauer der Slide-Animation

Dazu ein paar Beispiele.

$("#zahlen").newDropdown(); 
// Die Dropdown-Liste mit der ID "zahlen" wird umgebaut.
 
$("#tiere,#autos").newDropdown(300); 
// Die Dropdown-Listen mit der ID "zahlen" und "autos" werden umgebaut. Breite: 300px
 
$("select").newDropdown(undefined,500); 
// Alle Dropdown-Listen im Dokument werden umgebaut. Animations-Dauer: 500ms

Im direkten Vergleich sieht das Ganze dann so aus:

Da man innerhalb eines Formulars üblicherweise per Tabulator oder Maus navigiert, wurde auch die newDropdown-Liste dahingehend umgesetzt.

Gestaltung

Die Gestaltung der Liste erfolgt per CSS.

.new-dropdown {
	vertical-align:bottom;
}
.new-dropdown button {
	background-color: #bbb;
	border: none;
	padding:2px 5px 2px 5px;
	height: 20px;
	width: 100%;
}
.new-dropdown ul {
	background-color:#ccc;
	width: 100%;
}
.new-dropdown ul li {
	padding:2px 0px 2px 0px;
}
.new-dropdown ul li.active {
	background-color:#ddd;
}

IDs und Klassen die der Ursprungs Dropdown-Liste zugewiesen wurden, werden ebenfalls übernommen, wodurch eine gezielte Gestaltung einzelner Listen möglich ist.

Die Breite ist standardmäßig so groß wie die längste vorhandene Option. Eine fixe Breite kann bei der Zuweisung festgelegt werden.

$("select").newDropdown(500);

Alle Dropdown-Listen im Dokument werden mit einer Breite von 500px umgebaut.

Zur Verwendung

Ich stelle dieses Plugin, für jeden der ebenfalls Dropdown-Listen nach seinen Wünschen umsetzen will, gratis zur Verfügung. Es kann direkt über unsere Seite eingebunden oder als Paket heruntergeladen werden.

Paket: jquery.newDropdown-1.0.zip

<script type="text/javascript" src="http://www.simplease.at/newDropdown/jquery.newDropdown-1.0.min.js"></script>

Minified Version (3335 bytes)

<script type="text/javascript" src="http://www.simplease.at/newDropdown/jquery.newDropdown-1.0.js"></script>

Normal Version (5323 bytes)

Fragen, Probleme, Anregungen?

Bisher 5 Kommentare

1. Sarah — 25. November 2011

   Tolles Plugin, werd ich bei der nächsten Umsetzung gleich einbauen! Danke! Funktioniert es in allen Browsern?

2. Mathias — 25. November 2011

   Danke Sarah!

   Bisher habe ich es in folgenden Browsern erfolgreich getestet:

   • Firefox 3.6, 6, 7, 8
   • Safari 5
   • Opera 11
   • Chrome 15
   • Internet Explorer 7, 8, 9

3. Markus — 21. Mai 2013

   Habe das Problem, dass bei mehreren untereinander stehenden selects nur die unterste Box sauber funktioniert. Die oberen fahren dann immer nur kurz aus und sofort wieder ein. Habe schon verschiedene Z-Indexe usw. probiert. Gibt es hierfür eine Lösung

4. dan — 7. Juli 2013

   Und wie les ich jetzt den gewählten Value aus? Bei mir funktioniert jetzt gar nichts mehr. Weder irgendein Event noch das auslesen des aktuellen Wertes.

5. Mirco Brandes — 25. September 2013

   Hallo Mathias, ich habe ein ähnliches Problem wie dan und zwar nur mit dem Firefox. Ich habe 4 Auswahlfelder und nur bei einem klappt es „halbwegs“ mit der auswählen. Bei den anderen kommen keine Werte mit, wenn ich das Formular abschicke.

   Gibt es dafür einen Lösung, weil das ganze Script ansonsten ja super funktioniert. Viele Grüße Mirco

Du hast eine Meinung dazu? Wir freuen uns :)