Off-Canvas-Menü ohne JavaScript möglich?
Ja! In der Regel kommt JavaScript zum Einsatz, um Zustände eines HTML-Elements über andere Elemente zu steuern. Über einen einfachen Trick können allerdings auch Flyout-Navigationen, Accordions und Collapse-Elemente rein über CSS gesteuert werden.
CSS3 statt JavaScript
Mit der geschickten Kombination aus Pseudo-Klassen und Geschwisterselektoren lässt sich ein Offcanvas-Menü auch ohne JavaScript umsetzen. Um den Zustand der Navigation zu beeinflussen wird dabei eine einfache HTML-Checkbox verwendet.
Neben der Reduzierung des JavaScripts, was häufig zu einer verbesserten Ladezeit führt, erzielen wir hierbei noch zusätzlich eine Optimierung der Accessibility, da eine Checkbox browserübergreifend über die Tastatur und per Klick gesteuert werden kann und von Screenreadern gut erfasst wird.
Allgemeine Geschwisterselektoren
Oft vernachlässigt, aber sehr hilfreich sind die Geschwister-Selektoren „+“ und „~“, mit deren Hilfe HTML-Elemente bestimmend der vorausgehenden Elemente beeinflusst werden können. Gerade bei modularen Templates und Frameworks lassen sich dadurch smarte und intelligente Lösungen im Layout integrieren, indem sich Elemente in der Abhängigkeit ihrer Anordnung im DOM unterschiedlich stylen lassen.
Pseudo-Klasse „:checked“:
Die :checked-Pseudo-Klasse kann für Inputs vom Typ „checkbox" und „radio“ verwendet werden. Ähnlich wie beispielsweise ein :hover greift dieser kombinierte CSS-Selektor nur, wenn die Checkbox aktiviert wurde. Dies geschieht unabhängig vom Wert des Input-Elements.
Pseudo-Klasse „:target“
Alternativ würde sich auf ganz ähnliche Weise auch die Pseudo-Klasse „:target“ verwenden lassen. Hierbei muss beachtet werden, dass dann immer nur ein einzelner Wert als Fragment-Identifier in der URL verwendet werden kann. Im Gegensatz zu Menüs über mehrere möglichen Ebenen könnte dies im Falle eines „Akkordions“ beispielsweise genau den richtigen Effekt liefern.