Schon mal etwas vom Checkbox Hack gehört? Der Checkbox-Hack ist ziemlich simpel: eine Checkbox (zu deutsch ein Kontrollkästchen) wird zweckentfremdet und über dessen Status (angehakt oder nicht angehakt) ein Element unterschiedlich definiert.
Damit lassen sich viele tolle Sachen machen. Wie wäre es zum Beispiel mit einem Bereich, der erst dann eingeblendet wird, wenn ihr auf einen Button klickt? Das lässt sich prima für Frage-/Antwort-Bereiche nutzen. Im Standard (Kontrollkästchen ist nicht angehakt) ist nur die Frage zu sehen und der Antwort-Bereich ausgeblendet. Wird das Kontrollkästchen aktiv (Kontrollkästchen wird angehakt) wird der Antwortbereich eingeblendet. Wenn das Kontrollkästchen wieder inaktiv wird, blendet sich der Bereich wieder aus.
Interessante Sache, oder?
Wer jetzt an das hier denkt:
sollte sich vom Aussehen eines Kontrollkästchens verabschieden, da wir das eigentliche Kästchen nicht brauchen und ausblenden werden. Wir benötigen lediglich das Label und, wie bereits beschrieben, den Status der Checkbox.
Um das Ergebnis dieses Tutorials gleich vorwegzunehmen: wir werden dies hier erstellen:
Und los geht’s.
Beginnen wir mit der (recht übersichtlichen) HTML-Struktur. Wir legen zwei Div-Elemente an, jeweils mit der Klasse checkbox
. In diese Elemente fügen wir unser Kontrollkästchen (input type="checkbox"
) mit dazugehöriger Bezeichnung (label
) ein. Nicht zu vergessen: der Bereich für die Antwort. Diese fügen wir als Absatz (p
) ein.
<div class="checkbox"> <input type="checkbox" id="name"> <label for="name">Mein Name</label> <p>Mein Name ist Olli</p> </div> <div class="checkbox"> <input type="checkbox" id="ich"> <label for="ich">Das bin ich</label> <p>Olli ist 37 Jahre alt und wohnt in einer kleinen Gemeinde Namens Kirchdorf, im Herzen Niedersachsens. Er ist hauptberuflich Verwaltungsfachwirt und übt seinen Beruf derzeit hauptsächlich als IT-Systembetreuer aus. In seiner Freizeit ist er Konsolen-Gamer, Musikliebhaber sowie Film- und Serienfan. Immer mal wieder versucht er sich - mit zweifelhaftem Erfolg - an Projekten im Grafik- und Webdesign.</p> </div>
Diese Elemente definieren wir wie folgt:
.checkbox { position: relative; margin-bottom: 30px; } input[type=checkbox] { display: none; } label { position: relative; display: inline-block; width: 300px; padding: 10px 20px; background: orange; color: #fff; font-weight: 700; font-size: 1.5em; text-transform: uppercase; border-radius: 5px; cursor: pointer; } p { width: 300px; display: none; margin-top: 0; padding: 20px; background: #f7f7f7; font-weight: 400; font-size: 1.2em; font-style: italic; border-radius: 5px; }
Wie bereits erwähnt, benötigen wir das eigentliche Kontrollkästchen nicht und blenden es daher mittels display: none;
aus.
Der Absatz, also unser Antwortbereich, ist standardmäßig (Kontrollkästchen ist nicht angehakt) ebenfalls ausgeblendet. Um den Bereich einzublenden, wenn das Kontrollkästchen angehakt wird, fügen wir folgendes hinzu:
input[type=checkbox]:checked ~ p { display: block; }
:checked
ist der Aktiv-Status des Kontrollkästchen, also angehakt.
Und das war es auch schon. Ihr seht, der Checkbox-Hack ist recht einfach und schnell umgesetzt.
Wir wollen aber noch etwas für die Optik tun und fügen noch einen Rechts-Pfeil beim Frage-Button (label
) ein, der nach unten zeigt, wenn der Button gedrückt wurde. Das gibt einen netten Effekt.
Dafür müssen wir zunächst den linken Innenabstand des Buttons vergrößern. Verändert dafür folgendes:
label { padding: 10px 20px 10px 35px; }
Nun fügen wir den Pfeil ein, wenn die Checkbox nicht angehakt ist:
label:before { position: absolute; content: ""; width: 0; height: 0; top: 50%; left: 15px; margin-top: -8px; border-left: 8px solid #fff; border-top: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; }
und den Pfeil, wenn die Checkbox angehakt ist:
input[type=checkbox]:checked ~ label:before { margin-left: -4px; margin-top: -4px; border-left: 8px solid transparent; border-top: 8px solid #fff; border-bottom: 8px solid transparent; border-right: 8px solid transparent; }
Und fertig ist unser Frage-/Antwort-Bereich.
Hier könnt ihr das Tutorial live ausprobieren:
Und wer keine Lust zum nachbauen hat, für den habe ich hier den Download zur freien Verfügung:
Natürlich lässt sich diese Technik auch für viele andere Möglichkeiten verwenden. Beispielsweise kann so ein responsives Navigationsmenü ein- und ausgeblendet werden, ein gedrückter Button visualisiert werden und und und.
Habt ihr weitere Ideen, wie man den Checkbox Hack einsetzen kann?
Hey Olli,
super Ding!
Hab gerade versucht eine kleine „Transitions“ reinzufummeln – sodass es langsam nach unten „aufrollt“ !
Bekomm’s leider nicht ganz hin. Kannst du helfen?
Grüße
Flo
Hey Flo,
leider funktioniert
transition
nicht mit der Eigenschaftdisplay
. Man könnte als Workaround mitkeyframes
undopacity
folgendes machen:Gruß Olli
Hallo Olli. Sorry für meine deutsche Sprache ;) Ich bin zuffälig auf dein Blog gelandet. Ich muss nur sagen , dass bis du echt ein CSS GURU !!! Deine Idee sind einfach brilliant . Danke schön für Inspiration ;)
Grüß Zbyszek
Danke, für Deine Inspirationen…
Ich versuche mich gerade an einem CSS Seiten transition… (Beispiel: http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ ). Ich möchte den effekt aber wenn ich auf einen normalen Link klick…vielleicht hast du ja eine Idee.
MFG Stephan
Hallo Stephan,
in deinem Beispiel macht der Autor den Seitenwechsel mit
target
. Vielleicht hilft dir ja mein verlinkter Artikel weiter.Ansonsten erklär nochmal genauer, was du machen willst.
Gruß Olli
Hallo Olli
Zuerst mal herzlichen Dank für diesen top Beitrag :-)!
Nun habe ich ein Frage dazu: Lässt es sich auch machen, dass die aufklappende Fläche verlinkt wird? Und zwar nicht nur, wenn man auf den Text klickt, sondern auch wenn man auf die aufklappende Fläche klickt.
Vielen Dank für dein Antwort!
Hallo Julian,
sollte klappen, wenn du den Text, in meinem Beispiel ein Absatz (
p
) in einen Link setzt:Gruß Olli
Hallo Oliver
Vielen Dank für deine Antwort. Es klappt bei mir leider nicht. Dein Code sieht allerdings auch etwas seltsam aus!? Hier wäre übrigens meine Seite, wenn du dir die Sache mal anschauen möchtest: http://www.eisenbahnfans.ch
Ein weiteres Problem mit dem Checkbox-Hack habe ich übrigens, wenn jemand mit dem IE8 auf meine Seite zugreifen will: Die Navigation lässt sich dann nicht öffnen.
Vielen Dank zum Voraus für deine nette Hilfe :-)
Hallo Julian,
IE8 und Checkbox-Hack klappt nicht. Das geht imo erst mit dem IE9.
Wo auf deiner Seite hast du das Problem? Oder noch besser, zeig mir mal den Quellcode (bitte per Pastebin o.ä.).
Gruß Olli
Hallo Olli
Hier wäre der HTML-Code meines Checkbox-Hacks: http://pastebin.com/49sp3qFd und hier der dazugehörige CSS-Code: http://pastebin.com/wLHANb45
Die Idee wäre, dass die Verlinkung auf die anderen Seiten nicht nur auf dem Text funktioniert, sondern auf der ganzen Breite. Also so, wie z.B. in der mobilen Ansicht deines WordPress-Theme Dreizehn.
Der Grund dafür ist, dass ich mich zu einem radikalen Schritt entschlossen habe: Ich habe die CSS-Umschaltung zwischen breitem und schmalem Bildschirm rausgeworfen und mache neu nur noch eine mobile Version, welche jedoch auch auf grossen Bildschirmen einigermassen schön aussehen soll.
Nochmals Danke für deine Hilfe :-)
Gruss Julian
Hallo Julian,
bei einer Navigation solltest du eine Aufzählungsliste mit Listenelementen verwenden. Wie die Listenelemente formatiert werden, so dass diese gesamt klickbar sind, habe ich beispielsweise in diesem Beitrag beschrieben.
Du kannst dir auch gerne mein Theme ‚FUENFZEHN‘ herunterladen und dir die Navigation dort anschauen. Dort nutze ich nämlich den Checkbox-Hack.
Gruß Olli
Hallo Oliver,
erstmal vielen Dank für diesen Super-Beitrag. Ich habe auch gleich versucht, das mal einzusetzen. Habe es für ein Menü am Smartphone benutzt. Hier mal der Link zur Seite: http://wordpress.mmpcall.de
Auf dem iPhone, iPad und der Firefox-Simulation kleinerer Displays funktioniert es super. Nur mein Kumpel, welcher ein Samsung Galaxy S4 verwendet sagte, bei ihm läuft das nicht. Die Striche vom Menü rotieren nicht und das Menü kommt nur zum Vorschein wenn er das Telefon in den Landscape-Modus dreht.
Hast Du vielleicht eine Idee woran das liegen kann bzw. wie man das Telefon simulieren kann. Ich habe diverse Emulatoren getestet, da funktiniert es. Seine Freundin hat auch ein Samsung, da geht es ebenfalls nicht.
Gruß Ronald
Hallo Roland,
das liegt an der (Full-HD-) Auflösung des Galaxy S4. Dein Menü wird erst bei einer Breite von < 800 Pixeln aktiv, während das S4 eine Auflösung von 1920 Pixeln hat. Schau mal hier. Da findest du Media Queries für spezielle Geräte.
Gruß Olli
Hallo Oliver,
danke für Deinen Tip. Leider scheint das Problem woanders zu liegen. Wir haben es jetzt auch auf dem Samsung Galaxy S2 getestet. Dort gibt es auch das gleiche Problem. Wir haben nun herausgefunden, dass der Checkbox-Haken gesetzt oder entfernt wird wenn auf die 3 Striche für das Menü gedrückt wird, das Menü aber nur rein oder rausfährt, wenn danach das Telefon von Portrait-Modus in den Landscape-Modus oder umgekehrt gedreht wird.
Jetzt habe ich zum testen einfach hier http://wordpress.mmpcall.de/ ein Quadrat mit Checkbox erstellt. Das ist im
1. Browserfenster am PC blau
2. auf dem iPhone und auf seinem Samsung grün (heißt doch, Querie ok)
3. am iPhone wird es wieder blau wenn ich den Haken setze, aber bei seinem Samsung erst wenn der Haken gesetzt ist und er das Handy dreht
Kann das noch mit der Auflösung zusammenhängen?
Gruß Ronald
Noch ein Nachtrag:
Beim Samsung S4 funktioniert es doch, nur beim S2 und S3 muss man das Handy drehen.
Ich habe es jetzt lösen können, denke ich. Zumindest funktioniert es nun auch auf dem Samsung Galaxy S2. Das Problem war der Adjacent/General Sibling & Pseudo Class Bug. Habe folgenden CSS Hack ergänzt:
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from { padding: 0; }
to { padding: 0; }
}
Oder hast Du bezüglich diesem Bug einen anderen Lösungsansatz?
Gruß Ronald
Hallo Ronald,
freut mich, dass es nun klappt. Hab gar nicht an den Hack gedacht. Findet auch in meinen WordPress-Themes Verwendung.
Gruß Olli