Mit CSS Radio-Buttons stylen

Es ist relativ kompliziert einen Radio-Button bzw. eine Checkbox mit CSS zu stylen, aber mit Hilfe von JavaScript trotzdem kein Problem.
Das folgende Beispiel lässt sich dennoch gut einbauen und benötigt lediglich die Standard jQuery-Library.

Zuerst das HTML:

<form action="css-radio-demo.html" method="post">
	<div>
		<label for="foo">
			<span class="styled"><input type="radio" name="radiotest" id="foo" value="Foo" checked/></span>
			Foo
		</label>
		<label for="bar">
			<span class="styled"><input type="radio" name="radiotest" id="bar" value="Bar"/></span>
			Bar
		</label>
	</div>
	<br/>
	<button type="submit">Absenden</button>
</form>

Um den Radio-Button kommt noch ein span-Tag mit der Klasse styled. Auf Grundlage dieser Klasse wird das folgende CSS und JavaScript aufgebaut.
Ebenfalls sehr wichtig ist der Label-Tag, damit der Browser den später versteckten original Radio-Button immer noch anwählen kann. Bitte beachten: Wenn das Label-Feld nicht um das input-Feld gelegt wurde, müssen das for-Attribut und die ID des Input-Elements identisch sein.

Der CSS-Code:

.styled {
	background: url(radio-sprite.png) 0 0 no-repeat scroll transparent;
	display: inline-block;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.styled.checked {
	background-position: 0 -32px;
}
.styled input {
	position: absolute;
	z-index: -1;
}

Das span mit der Klasse styled bekommt ein austauschbares Hintergrundbild (dies sollte der gestylte Radio-Button sein) und das eigentliche input-Element wird versteckt. Mit absoluter Positionierung und einem negativen z-index wird das input-Element einfach unter dem übergeordneten Elementen platziert. Damit ist der Radio-Button zwar noch da, wird aber nicht mehr angezeigt und genau das ist wichtig, damit die Funktion des Elements für das Formular weiterhin gegeben ist.
Dazu kommt noch eine checked-Klasse mit der das Hintergrundbild bei einem angewählten Radio-Button geändert wird.

Der JavaScript-Code:

View Code JAVASCRIPT
$(document).ready(function() {
	$(".styled input:checked").parent().addClass("checked");
	$(document).on("change", ".styled input", function() {
		var $this = $(this);
		var form = $this.closest("form");
		form.find("input[name='"+$this.attr("name")+"']").parent().removeClass("checked");
		$this.parent().addClass("checked");
	});
});

Mit dem ersten Befehl (Zeile 2), wird die checked-Klasse hinzugefügt, wenn der Radio-Button bereits vorausgewählt wurde. In dem darauffolgenden Codeblock wird ein neues onchange-Event auf das Input-Element gelegt, das die checked-Klassen entfernt bzw. bei dem neu ausgewählten Element hinzufügt.

Und hier geht’s zur Demo:
CSS Radio-Button Demo

Die Demo funktioniert übrigens in allen Browsern (sogar im IE6, wenn man gif-Bilder statt PNG verwendet).

jQuery Plugin: Multiple Select

Heute stelle ich mal mein erstes öffentliches jQuery Plugin vor.

In Prinzip eine ganz simple Funktion, aber ungemein hilfreich.
Jeder hat bestimmt schonmal riesige Select-Felder gehabt wo man mehrere Werte auswählen muss. Und wenn man sich dann nur einmal verdrückt oder vergisst die STRG-Taste gedrückt zu halten, muss man alles nochmal einstellen. Sehr ärgerlich, aber das lässt sich jetzt endlich verhindern. Mit meinem kleinen jQuery Plugin „Multiple Select“ werden die ausgewählten Optionen im Select-Feld nicht entfernt, wenn man ein anders Feld anklickt und das ganze ohne großen Schnickschnack.

Anleitung + Demo + Download (Englisch)

Das Plugin ist veröffentlicht unter GNU/GPL.

Einfaches Drop-Down Menü mit jQuery

Wer denkt, dass man für eine Drop-Down Navigation ein großes jQuery Plugin braucht, der liegt falsch. Ein solches Menü lässt sich nämlich mit weniger als 10 Zeilen JavaScript-Code realsieren. Nagut, dafür ist erstmal nur eine Ebene möglich, aber es soll ja einfach und schnell gehen.

Demo

Der HTML-Code

Am Anfang steht der HTML-Code. Erklären muss ich dazu hoffentlich nichts. Der größte Teil ist langweilige Schreibarbeit.

<div id="nav">
    <ul>
	    <li><a href="index.html">Home</a></li>
	    <li>
	        <a href="aktuelles.html">Aktuelles</a>
                <ul>
	            <li><a href="news.html">News</a></li>
	            <li><a href="veranstaltungen.html">Veranstaltungen</a></li>
	            <li><a href="archiv.html">Newsarchiv</a></li>
                </ul>
            </li>
	    <li>
	        <a href="m3.html">Menüpunkt 3</a>
                <ul>
	            <li><a href="u1.html">Unterpunkt 1</a></li>
	            <li><a href="u2.html">Unterpunkt 2</a></li>
	            <li><a href="u3.html">Unterpunkt 3</a></li>
	            <li><a href="u4.html">Unterpunkt 4</a></li>
	            <li><a href="u5.html">Unterpunkt 5</a></li>
            </ul>
        </li>
    </ul>
</div>

Der CSS-Code

Ob ihr es nun glaub oder nicht, aber jetzt kommt der schwierigste Teil der Drop-Down Navigation. Bis man hier das gewünschte Aussehen erreicht hat, vergeht schon ein wenig Zeit, aber das wäre bei jedem anderen Plugin auch nicht anders.

#nav {}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; }
* html li li { display:inline; } /* IE6 Bugfix... */

Der JavaScript-Code

So, und hier beginnt der magische Teil.

View Code JAVASCRIPT
$(document).ready(function() {
	$("#nav li:has(ul)").hover(function(){
		$(this).find("ul").slideDown();
	}, function(){
		$(this).find("ul").hide();
	});
});

Durch das Hover-Event, das wir dem li-Tags zuweisen, haben wir zwei Funktionen, die erst beim Mouseover und beim Mouseout ausgeführt werden. Der Unterschied zu den normalen Mouseover und Mouseout Events ist, dass die zweite Funktion erst ausgeführt wird, wenn die erste komplett fertig ist. So entstehen keine merkwürdigen Effekte, wenn die Mouse zu schnell bewegt wird.
Vorher sollte im Head natürlich jQuery eingebunden werden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Und das war’s auch schon. Kein großes Plugin, keine große Konfiguration, dafür ist der Code schnell eingebunden und es funktioniert in jedem bekannten Browser.

UPDATE 27.05.2011: Funktioniert nun auch im IE6 und IE7.

Ältere Artikel »