{"id":3046,"date":"2013-08-14T18:51:39","date_gmt":"2013-08-14T16:51:39","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3046"},"modified":"2018-02-20T11:02:47","modified_gmt":"2018-02-20T09:02:47","slug":"off-canvas-menu-sliding-menue-fur-contao","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2013\/08\/off-canvas-menu-sliding-menue-fur-contao\/","title":{"rendered":"Off-Canvas Menu (Sliding-Menue) f\u00fcr Contao"},"content":{"rendered":"

\"dk-mmenue\"<\/a><\/p>\n

Zugegebenerma\u00dfen habe ich schon ein wenig neidisch nach WordPress geschielt, denn dort gibt es die offcanvas-Menues schon l\u00e4nger. Aber auch die Contao-Freunde d\u00fcrfen sich jetzt freuen, denn Dirk Klemmt (Dirch) hat, basierend auf mmenu<\/a>, eine Erweiterung<\/a> dazu geschrieben und ins Extension Repository<\/a> hochgeladen.<\/strong><\/p>\n

F\u00fcr alle die nicht wissen, was es mit „off-canvas“ auf sich hat: nicht nur, aber vorwiegend auf mobilen Endger\u00e4ten kann man beobachten, dass ab einer bestimmten Viewportgr\u00f6\u00dfe die Breite, die f\u00fcr ein Hauptmen\u00fc zur Verf\u00fcgung steht, oft zu schmal wird. Manchmal bilden die Men\u00fcpunkte dann eine zweite Reihe oder, wie in Contao bisher \u00fcblich, werden durch das Modul „Quciknavigation“ ersetzt.<\/p>\n

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\u00fcr weggeschoben. „Darunter“ kommt dann das Men\u00fc mit allen anklickbaren Links zum Vorschein.<\/p>\n

Die Erweiterung von Dirk Klemmt l\u00e4sst sich sehr einfach installieren, allerdings sollte man bei angepassten fe_page Seitenvorlagen, bei denen header und\/oder footer aus dem #wrappper herausgel\u00f6st werden, etwas aufpassen. Die Erweiterung braucht einen allumfassenden Container, weil sonst nicht alle Webseiteninhalte beiseite geschoben werden k\u00f6nnen. Es ist aber nicht zwingend notwendig, dass dieser Container #wrapper hei\u00dft, in einer meiner Anwendungen habe ich einfach einen #canister genommen und um alle Inhalte gelegt.<\/p>\n

Was braucht es um die Erweiterung zu installieren?<\/strong><\/span>
\n1. Zun\u00e4chst die Erweiterung installieren, danach ein Modul anlegen und darin die Optionen ausw\u00e4hlen.
\n2. Dem Modul eine ID mit z.B. dem Namen „offcanvas“ geben.
\n3. Dann noch ein Modul vom Typ „eigener html-Code“ erzeugen und darin einen Link auf das Modul einf\u00fcgen
\n4. Modul und Linktext-Modul an beliebiger Stelle in der Seitenvorage bei den einzuf\u00fcgenden Modulen hinzuf\u00fcgen.<\/p>\n

<\/div>\n

Schon fertig.<\/p>\n

See it in Action:<\/strong><\/span>
\nThomas Weitzel <\/a> hat es in seinem neuen Contao-Blog<\/a> schon eingebaut.
\nEinfach mal die Seite zusammeschieben und auf das Icon rechts oben klicken.<\/p>\n","protected":false},"excerpt":{"rendered":"

Contao-Freunde d\u00fcrfen sich jetzt freuen: Dirk Klemmt (Dirch) hat ein off-canvas Menu als Erweiterung zur Verf\u00fcgung gestellt. Damit k\u00f6nnen nun auch Contao-Fans auf eine weitere Navigationsm\u00f6glichkeit zugreifen. <\/p>\n","protected":false},"author":1,"featured_media":3049,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[458,87,456,457],"yst_prominent_words":[956,957,958,959,960,962,963,531,804,858],"class_list":["post-3046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","category-contao","tag-sliding-menu","tag-responsive-webdesign","tag-mmenu","tag-offcanvas"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3046"}],"version-history":[{"count":4,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3046\/revisions"}],"predecessor-version":[{"id":4468,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3046\/revisions\/4468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media\/3049"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3046"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}