Zugegebenermaßen habe ich schon ein wenig neidisch nach WordPress geschielt, denn dort gibt es die offcanvas-Menues schon länger. Aber auch die Contao-Freunde dürfen sich jetzt freuen, denn Dirk Klemmt (Dirch) hat, basierend auf mmenu, eine Erweiterung dazu geschrieben und ins Extension Repository hochgeladen.
Für alle die nicht wissen, was es mit „off-canvas“ auf sich hat: nicht nur, aber vorwiegend auf mobilen Endgeräten kann man beobachten, dass ab einer bestimmten Viewportgröße die Breite, die für ein Hauptmenü zur Verfügung steht, oft zu schmal wird. Manchmal bilden die Menüpunkte dann eine zweite Reihe oder, wie in Contao bisher üblich, werden durch das Modul „Quciknavigation“ ersetzt.
Als wesentlich elegantere, platzsparendere und (aus meiner Sicht) auch benutzerfreundlichere Methode gibt es das „off-canvas“ oder „sliding Menue“. Via Javascript wird der ganze Webseitenbereich nach unten, rechts oder links wie eine Tür weggeschoben. „Darunter“ kommt dann das Menü mit allen anklickbaren Links zum Vorschein.
Die Erweiterung von Dirk Klemmt lässt sich sehr einfach installieren, allerdings sollte man bei angepassten fe_page Seitenvorlagen, bei denen header und/oder footer aus dem #wrappper herausgelöst werden, etwas aufpassen. Die Erweiterung braucht einen allumfassenden Container, weil sonst nicht alle Webseiteninhalte beiseite geschoben werden können. Es ist aber nicht zwingend notwendig, dass dieser Container #wrapper heißt, in einer meiner Anwendungen habe ich einfach einen #canister genommen und um alle Inhalte gelegt.
Was braucht es um die Erweiterung zu installieren?
1. Zunächst die Erweiterung installieren, danach ein Modul anlegen und darin die Optionen auswählen.
2. Dem Modul eine ID mit z.B. dem Namen „offcanvas“ geben.
3. Dann noch ein Modul vom Typ „eigener html-Code“ erzeugen und darin einen Link auf das Modul einfügen
4. Modul und Linktext-Modul an beliebiger Stelle in der Seitenvorage bei den einzufügenden Modulen hinzufügen.
Schon fertig.
See it in Action:
Thomas Weitzel hat es in seinem neuen Contao-Blog schon eingebaut.
Einfach mal die Seite zusammeschieben und auf das Icon rechts oben klicken.
Hallo
Danke für dieses Tutorial, aber leider versehe ich noch nicht so ganz wie es funktioniert?
könntest du einen Schritt für schritt Tutorial erstellen?
Das wäre echt super ;)
Danke
Wo genau hakt es denn? Eigentlich ist die Beschreibung hier ja eine Anleitung. Was genau verstehst du nicht?
Danke ;)
der Fehler lag bei mir! hatte mir irgendwie den JS Ordner gelöscht und so wurde alles durcheinander angezeigt!
;)