Gerade für responsive Layouts sind Off-Canvas-Menüs mit vertikaler Navigation wie geschaffen. Bei einer Off-Canvas-Navigation ist das Menü zunächst außerhalb des Bildschirm positioniert und wird erst bei Bedarf (also auf Useranforderung nach Klick auf eine Schaltfläche) in den sichtbaren Bereich „hineingeschoben“.
See the Pen Off-canvas navigation (CSS only) by Oliver (@reap705) on CodePen.
Mein Beispiel benötigt kein Javascript und basiert komplett auf CSS. Es ist optimal geeignet umfangreiche Navigationsstrukturen darzustellen, da die Untermenüs ebenfalls erst auf Knopfdruck geöffnet werden.
Der Code darf wie gewohnt privat wie gewerblich ohne Einschränkungen genutzt, verändert oder weitergegeben werden. Viel Spaß damit.
Hallo,
leider geht das Menü nicht auf einem Samsung Galaxy S5 Smartphone. Das Menü selbst verschiebt sich nicht nach links.
viele grüsse
Also bei mir klappt es auf einem S5 wunderbar. Danke Olli!
Hallo hallo —
— also ich finde Dein Menü echt Klasse — funktioniert auch alles bis auf leider eine eigentlich einfache aber sehr wesentliche Sache : wie kann ich überhaupt innerhalb von Checkboxgesteuerten Elementen (also sämtlichen Unterpunkten ab dem Bereich „Produkte“ ) die Links in den Listen setzen ? –bzw. kann man Checkboxen überhaupt verlinken ? — krieg ich ums Verrecken nicht hin – was mach´ ich falsch ?
Gruß
Mathias
Klappt wunderbar, bis auf eine kleine aber doch sehr wichtige Sache. Die in dem schwarzen Balken links oben die 3 Striche auf die man klickt um auf die Menüpunkte zu gelangen tauchen bei mir einfach nicht auf? Bei mir sind sie unsichtbar. Woran liegt das?