smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

CSS3: Click-Event & Slide-Effekt ohne JavaScript realisieren

19. Dezember 2012
Stephan
CSS3: Click-Event & Slide-Effekt ohne JavaScript realisieren

Für die Möglichkeit auf Klicks von Benutzern zu reagieren und so ausgelöste Aktionen mit Effekten zu unterlegen, hat sich im Bereich der Webentwicklung der Einsatz von JavaScript in Verbindung mit CSS bewährt.

Dank CSS3 und z.B. Transitions können wir heutzutage aber auch einfache Effekte vollkommen ohne den Einsatz von JavaScript umsetzen.

In diesem Artikel möchte ich euch zeigen, wie ihr allein mit CSS eine Liste erstellen könnt, deren Listenelemente aus- und wieder zugeklappt werden können.

Das hier vorgestellte ist aber eher als Versuch/Experiment anzusehen und sollte derzeit nicht im Produktiveinsatz verwendet werden. Ganz einfach, weil nicht alle Browser die in diesem Artikel genutzen CSS3 Eigenschaften gleichermaßen implementiert haben (wenn sie denn überhaupt schon implementiert sind).

Beispiel: Mobile Website von Wikipedia

Ein gutes Beispiel für die Verwendung einer aus- bzw. zuklappbaren Liste, ist die mobile Website-Variante von Wikipedia:

Wikipedia: Mobile Variante mit Ausklappmenü

Der Nutzer kann per Klick auf eine Überschrift den dazugehörigen Inhalt ausklappen.

Im Fall von Wikipedia ist das Ganze natürlich mithilfe von JavaScript umgesetzt. Wir wollen diese Funktionalität nun aber nur mithilfe von CSS3 umsetzen:

Demo: CSS3 basierte Ausklappliste mit Slide-Effekt

HTML-Liste erstellen

Als erstes erstellen wir uns eine einfache Liste mit folgendem Aufbau:

<ul id="infoList">
	<li>
		<div class="topic">Info 1</div>
		<input type="checkbox" />
		<div class="checkWrap"></div>	
		<div class="text">This is information number 1...</div>
	</li>
	<li>
		<div class="topic">Info 3</div>
		<input type="checkbox" />
		<div class="checkWrap"></div>	
		<div class="text">This is information number 2...</div>
	</li>
	<li>
		<div class="topic">Info 3</div>
		<input type="checkbox" />
		<div class="checkWrap"></div>	
		<div class="text">This is information number 3...</div>
	</li>
</ul>

Wir haben also eine einfache ul-Liste mit 3 li-Listenelementen. Innerhalb dieser Listenelemente befinden sich 4 weitere Elemente. Zum Anfang haben wir ein div-Element, dass unsere (Teil-)Überschrift enthält. Danach folgt eine Checkbox (input) und ein leeres div-Element. Zum Schluss folgt dann das div-Element mit dem eigentlichen Inhalt, den wir entweder aus- bzw. zuklappen möchten.

Checkbox zum Erkennen eines Klicks

In JavaScript würden wir zum Erkennen eines Klicks mittels jQuery einfach das click-Event des jeweiligen Elements binden und angeben, welche Funktion beim Eintritt des Events ausgelöst werden soll.

In unserem Fall nutzen wir den sogenannten „CSS Checkbox Hack“. Wir nutzen also eine Checkbox, um zu registrieren, ob der Benutzer eine Checkbox (die sich neben der Überschrift befindet) aus unserer Liste angeklickt hat. Der Text wird immer dann ausgeklappt, wenn die Checkbox selektiert wurde. Wird die Checkbox deselektiert, wird der Text ganz einfach wieder zugeklappt.

Den Status der Checkbox können wir uns nun zu Nutze machen. Hierfür nutzen wir einfach den CSS Pseudoklassen-Selektor :checked in Verbindung mit dem CSS General Sibling Combinator.

Neben der Möglichkeit mittels einer Checkbox Klicks zu erkennen, gibt es noch weitere Möglichkeiten: CSS Click Events

CSS zum Aus-/Zuklappen ohne Effekte

Wir werden nun unsere Liste mittels CSS so anpassen, dass beim Klick auf eine unserer Checkboxen der entsprechende Text aus- bzw. zugeklappt wird:

* {
	margin:0;
	padding:0;
}
#infoList {
	margin: 10px auto;
	width: 400px;
	list-style: none;
	border:1px solid #e2e2e2;
}

.topic {
	padding: 10px;
	background: #f7f7f7;
	border-bottom: 1px solid #e2e2e2;
	box-shadow: inset 0 1px 2px #e2e2e2;
}

.text {
    display: none;
    padding: 10px;  
    background: #fdfdfd;
}

input[type="checkbox"] {
    position: relative;
    float: right;
    top: -35px;
    left: -10px;
    width: 30px;
    height: 30px;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}

.checkWrap {
	position: relative;
	float:right;
	top: -27px;
	left: 10px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 15px solid #ddd;
}

input[type="checkbox"]:checked ~ .checkWrap {
	border-bottom: 15px solid #ddd;	
	border-top: 0;	
}

input[type="checkbox"]:checked ~ .text {
    display: block;
}

Zeile 19:
Hier geben wir mittels display: block an, dass die Text-Elemente standardmäßig alle ausgeblendet werden.

Zeile 25:
Die Checkbox verschieben wir so, dass sie rechts neben der Überschrift platziert ist. Weiterhin blenden wir sie mittels opacity: 0 aus, indem sie nun transparent ist. Außerdem haben wir die Größe geändert, damit der Benutzer eine größere Flächen zum Anklicken der Checkbox hat.

Zeile 37:
Das jeweilige checkWrap-Element verschieben wir an die Stelle, wo sich auch die Checkbox befindet. Dieses Element dient nur als nettes Gimmick und zeigt ein Dreieck. Das soll dem Benutzer zeigen, dass wenn er/sie hierdrauf drückt, der dazugehörige Text augeklappt wird.

Zeile 50:
Hier kommt nun ein wenig, wir nennen es einfach mal Magie oder Hack, ins Spiel. Wenn die Checkbox angeklickt wurde, dann wird das checkWrap-Element, dass auf die Checkbox, also dem input-Element folgt, geändert. In unserem Fall zeigen wir nun einfach ein umgedrehtes Dreieck.

Zeile 55:
Hier geben wir an, dass der dazugehörige Text angezeigt wird.

Slide-Effekt hinzufügen

Nun wird also unser Text einfach angezeigt bzw. wieder ausgeblendet. Da das ja irgendwie langweilig ist, wollen wir nun einen Slide-Effekt hinzufügen.

Hierfür passen wir unser CSS wie folgt an:

.text {
    padding: 0 10px;
    height: 0;
    overflow: hidden;
    background: #fdfdfd;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

input[type="checkbox"]:checked ~ .text {
    height: auto;
    padding: 10px;
}

Da CSS Transitions mit der display-Eigenschaft nicht funktionieren, nutzen wir height und padding. Standardmäßig setzen wir die Höhe der Text-Elemente auf 0 und geben mittels overflow: hidden an, dass die Texte augeblendet werden. Des Weiteren geben wir eine Transition für unseren Slide-Effekt an.

Mobile Browser unterstützen

Unsere klickbare Liste mit Slide-Effekt sollte nun auf allen modernen Desktop-Browsern funktionieren. Selbst im Internet Explorer 9 funktioniert die Liste, wobei wir hier auf den Slide-Effekt verzeichten müssten.

Probleme gibt es jedoch bei einigen mobilen Browsern. Beispielsweise existiert beim Standard-Browser von Android ein Bug bzgl. den CSS Sibling Kombinatoren in Verbindung mit CSS Pseudoklassen.

Nähere Informationen hierzu findet ihr auf css-tricks.com im Artikel: WebKit Adjacent/General Sibling & Pseudo Class Bug

Eine Lösung hierfür scheint das Hinzufügen eines weiteren CSS Hacks zu sein (nicht gerade schön aber es funktioniert):

body { 
	-webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
	from { padding: 0; } 
	to { padding: 0; } 
}

Diesen CSS-Teil solltet ihr direkt am Anfang eurer CSS-Anweisungen einfügen.

Ein weiteres Problem ist, dass die Benutzer auf dem Smartphone die Checkbox mit ihrem Finger auch treffen müssen. Anscheinend funktioniert es bei den meisten mobilen Browser aber nicht, einfach die Größe der Checkbox mittels width und height anzupassen. Aus diesen Grund skalieren wir die Checkbox einfach mittels transform:

input[type="checkbox"] {
    position: relative;
    float: right;
    top: -35px;
    left:-10px;
    width: 30px;
    height: 30px;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
}

Jetzt sollte die Checkbox auch auf mobilen Geräten leicht mittels einem Finger anklickbar sein. Ich muss dazu sagen, dass ich das bisher nur auf meinem Smartphone mit dem Standard-Browser von Android und der mobilen Variante von Firefox ausprobiert habe.

Fazit

Wie ihr seht, kann man mit CSS3 sehr viel anstellen, wofür sonst immer JavaScript oder Flash nötig war. Auch wenn man die vorgestellte Variante auf Grund der Problematik Browser-Kompatibilität nicht produktiv einsetzen sollte, finde ich alleine die Möglichkeit dessen, dass Ganze mit CSS3 umzusetzen doch sehr interessant.

Was haltet ihr von dieser Umsetzung? Funktioniert die Demo in eurem (mobilen) Browser? Feedback ist sehr erwünscht!

Kommentare  
4 Kommentare vorhanden
1 Marco schrieb am 20. Dezember 2012 um 09:17 Uhr

Tolles Tutorial und ein schöner Ausblick auf das was ohne JS möglich ist. Leider stellen sich bei mir umgehend die Haare zu berge, sobald ich die Phrase „CSS-Hack“ lese. Die Eingangs erwähnte Message „nicht für Produktivsysteme geeignet“, trifft voll zu: Keinerlei Funktionalität im Android 2.3.3 Default-Browser (Samsung Galaxy).

2 Stephan L. schrieb am 20. Dezember 2012 um 12:51 Uhr

Hey Marco,

ist halt leider immer das Problem mit den verschiedenen Browsern und deren verschiedenen Implementationen. Bei mir funktioniert es mit dem Standard-Browser von Android 4.0.4 (Motorola Razr) einwandfrei.

Das zeigt halt, dass man derzeit wohl oder übel solche Funktionalität weiterhin mit JavaScript umsetzen sollte. Andererseits kann man auch im Sinne von Progressive Enhancement versuchen das CSS so aufbauen, dass z.B. die Liste standardmäßig aufgeklappt ist für Browser die die Funktionalität nicht unterstützen.

Grüße Stephan

3 Denis K. schrieb am 31. Oktober 2014 um 14:46 Uhr

Hallo Marco,

vielen Dank für die Anleitung. Funktioniert bei mir super.
Ich hätte dennoch eine Frage. Ich verwende mehrere solcher „Ausklapptexte“ auf meiner Seite. Jetzt frage ich mich, ob man das Ganze so erweitern könnte, dass wenn jemand schon einen Text ausgeklappt hat, dieser wieder eingeklappt wird, sobald er einen weiteren Ausklapptext anklickt???

Oder strapaziere ich das Ganze jetzt zu viel?

Danke und Gruß,

Denis

4 Torben schrieb am 21. Januar 2015 um 15:51 Uhr

Tolles Tutorial,

ein kleines Problem hab ich aber, wenn ich ein flächendeckendes Hintergrundbild habe wird es beim Aufklappen des Inhalts um die jeweilige Größe nach unten verschoben.

Wie wäre das zu lösen?

Gruß
Torben

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!