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.

(Alternativ könnte dies auch über 100% der Breite des relativen Containers geschehen. Bsp.: position: absolute; right: 100%; Was jedoch zu einer verzögerten Animation führen kann, sofern die Navigation schmaler als die Breite des relativen Containers ist. In diesem Fall würde die Navigation erst einen Teil ausserhalb des Sichtbereichs wandern.)

Mit Hilfe von 2 Links, die jeweils den Hashwert '#nav' setzen und diesen wieder leeren, kann die Navigation über den CSS3 Selektor :target aktiviert und deaktiviert werden. Wird also im Browser der Hashwert mit der passenden ID der Navigation mittels Link gesetzt, wirkt das #nav:target und der neue Zustand kann mittels '#nav:target {...}'definiert werden. Das :target gleicht ab, ob eine ID mit dem in der URL gesetzten Hashwert existiert. In unserem Fall der ID der Off-Canvas Navigation.

Die Animationen laufen über CSS3 Transitions. Um die Icons mit purem CSS zu realisieren wurden die Pseudoelemente :before und :after genutzt. Wichtig ist hier, dass mit content: '\00a0'; (Lehrzeichen) den beiden Pseudo-Elementen ein Inhalt gegeben wird, da es sonst nicht gerendert wird.

Da Alles über CSS bzw, 2 getrennten Links läuft, ist diese Lösung auch auf Touch-Geräten lauffähig.

Browser Unterstützung

(http://caniuse.com/#search=%3Atarget)

Desktop:

  • Internet Explorer ab Version 9 (Funktional, ab Version 10 Inklusive Animationen)
  • Chrome ab Version 32
  • Safari ab Version 7

Mobile

  • Mobile Safari ab Version 7.1
  • Android Browser ab Version 4.1
  • Chrome für Android ab Version 42

Demo:

See the Pen Pure CSS Off-Canvas Navigation 2 by John (@herr_john) on CodePen.

Kommentare

Hey there would you mind stating which blog platform you're working with?

I'm looking to start my own blog soon but I'm having a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your design seems different then most blogs and I'm looking for something unique.
P.S My apologies for being off-topic but I had to ask!

This Blog is powered by Drupal.

Neuen Kommentar schreiben