Pure CSS Off-Canvas Navigation

Mit Hilfe des CSS3 Selektor :target lässt sich eine Off-Canvas Navigation mit reinem CSS, komplett ohne Javascript realisieren. Einziges Manko: Funktional wird es zwar ab dem Internet Explorer 9, die Animationen jedoch erst ab Internet Explorer 10 unterstützt.

Beschreibung

Im Grundzustand wird die Navigation mit dem negativen Wert der eigenen Breite aus dem Sichtbereich des Browsers geschoben.

CSS-Sprites und -webkit-transition

CSS-Sprites sind eine Möglichkeit mittels CSS Grafiken für eine Website oder einzelne Elemente in einer einzelnen Grafik zu steuern. So können die verschiedenen Status mittels background-position positioniert werden. Dies hat den Vorteil, dass Javascript nur eine Anfrage an den Server sendet und so die Geschwindigkeit maximiert und (die Serverlast minimiert) wird. Dies ist vor allem für große Websites mit großen Traficaufkommen von Bedeutung.