Jede Webseite wird heutzutage immer weiter mit JavaScript überladen. Da freut man sich mal, wenn man mal keines benutzen muss und nur mit HTML und CSS auskommt. In diesem Fall kann man mehrseitige Seiten oder Felder ohne JavaScript erzeugen, in dem man nur mit CSS3-Selektoren und angepassten <input>’s arbeitet. Das ganze ist kompatibel mit allen Browsern, die CSS3 Selektoren unterstützen.  

Input Checkbox als Trigger für Animationen

Im Prinzip verwendet man die Kombination aus den Selektoren ~ oder + und :checked, um relativ erreichbare Elemente zu manipulieren. Dazu platziert man ein ausgeblendetes  <input type="checkbox"> Element mit einem zugehörigen <label> als Auslöser und bindet mit ~ die Veränderungen daran. Im Folgend wird es an einem kleinen Codebeispiel gezeigt. Style:
#state:checked + #field {
  background-color:black;
}
#field {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.2s;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  color: wheat;
  margin: 10px;
}
#state {
  display:none;
}
Mit folgendem HTML:
<input type="checkbox" id="state">
<label id="field" for="state">Click Me</label>
Ergebnis:

Beispiel seitliches Klapp-Menü

Natürlich lässt sich dieses auch auf etwas anwenden. Zum Beispiel kann man ein Menü damit auf und zu klappen.

 

Erweiterung mit Radio-Input

Jetzt kann man noch eine Stufe weiter gehen und anstatt der einen Checkbox mehrere Radio’s (oder beides) nehmen und damit kann man mehrere Zustände abbilden und diese sogar miteinander kombinieren.

 

 

Fazit

Somit kann mit einfachen Mitteln eine komplexe Seite zusammengesetzt werden. Zum weiteren Optimieren der Ladezeit, kann man die Inhalte der versteckten Elemente erst später injizieren.