# Offcanvas Menü **URL:** \ **Category:** Programmierung\ **Created:** [23. April 2015 um 12:29 UTC](https://forum.shopware.com/t/offcanvas-menu/26448 "2015-04-23T12:29:47Z")\ **Posts on this page:** 15\ **Page:** 2
**Author:** ![svg87](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@svg87](https://forum.shopware.com/u/svg87)\ **Post date:** [7. September 2016 um 14:32 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/21 "2016-09-07T14:32:42Z")
Hier mal aus einem  internem Wiki Artikel von uns, wo ich das mal zusammen geschrieben hatte. Evtl. haben sich manche Namen/Bezeichnungen geändert.   _Es müssen zunächst folgende less-Dateien überschrieben werden:_ _frontend/\_public/src/less/\_components_ _             -\> offcanvas-menu.less frontend/\_public/src/less/\_modules              -\> sidebar.less_ _Hier müssen die  „größer gleich“ Tablet Viewport Einträge rausgenommen werden. Denn hier wird das Layout ausgeblendet und alle Einträge aus dem Standardmenü._   _Dazu das Menü im StateManager in jquery.shopware-responsive.js für die Viewports m, l und xl freischalten._ _frontend/\_public/src/js _ _              -\> jquery.shopware-responsive.js_ _m,l und xl hinzufügen für das offcanvasMenu_ _Nun sieht man das Menü schonmal, aber es ist ist noch nicht so, dass man die detaillierte Navigationslogik aus dem Mobilbereich hat._   _Für exakte Übereinstimmungen der Menüs (Mehrstufigigkeit der Mobilkomponente) auch im Statemanager subCategoryNav für die Viewports m, l, xl freischalten._     Die erwähnten „m / l / xl“ Viewports natürlich je nach Anforderung ersetzen. Vllt. hilfts ja noch 🙂 Mfg Sascha von Grönheim, Wist+Laumann ---
**Author:** ![padaja](https://avatars.discourse-cdn.com/v4/letter/p/9fc348/32.png) [@padaja](https://forum.shopware.com/u/padaja)\ **Post date:** [10. September 2016 um 07:05 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/22 "2016-09-10T07:05:16Z")
Vielen Dank für die Zusammenfassung, allerdings wird das Menü trotzdem im Desktop nicht angezeigt. Bist du dir sicher das es nur Änderungen an diesen 3 Dateien bedarf das das Menü angezeigt wird? Laut css gibt es größer gleich 768 Pixel diesen Eintrag: @media screen and (min-width: 48em) .shop–navigation .entry–menu-left { display: none;}   Dieser Bereich befindet sich in keiner der beiden less Dateien. Wenn ich es händisch als display: block; darstelle wird zwar das Menü dargestellt, bei klick auf das Menü passiert aber nichts außer das im Browser oben noch #offcanvas–left mit drin steht.       ---
**Author:** ![padaja](https://avatars.discourse-cdn.com/v4/letter/p/9fc348/32.png) [@padaja](https://forum.shopware.com/u/padaja)\ **Post date:** [13. September 2016 um 18:00 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/23 "2016-09-13T18:00:42Z")
Nach Jahren des herumfrickelns, bin ich einen Schritt weiter. Es sieht so aus als ob die js Datei  **jquery.shopware-responsive.js** im Ordner **frontend/\_public/src/js** nicht überschrieben wird. Deshalb habe ich das ganze im Responsive Ordner gemacht und nun wird die Navigation angezeigt. Allerdings ist das ja nicht Update sicher. Gibt es denn eine Möglichkeit das auch die js Datei im meinem custom Theme genommen wird?   Freue mich auf Antworten ---
**Author:** ![Philipp\_Schuch](https://avatars.discourse-cdn.com/v4/letter/p/8797f3/32.png) [@Philipp\_Schuch](https://forum.shopware.com/u/Philipp_Schuch)\ **Post date:** [14. September 2016 um 09:44 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/24 "2016-09-14T09:44:12Z")
Hallo, Dateien bindet man grundsätzlich so ein:  [Using CSS and JavaScript in themes](https://developers.shopware.com/designers-guide/css-and-js-files-usage/) Die eigentliche Registrierung des Plugins am **StateManager** kannst Du mit **removePlugin()** entfernen und mit **addPlugin()** Deinen eigenen Aufruf mit den entsprechenden Viewports etc. anlegen. Weitere Infos zum StateManager findest Du hier: [jQuery plugins and the StateManager](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/) Sonnige Grüße, Phil    ---
**Author:** ![Arya\_Svitkona](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/arya_svitkona/32/15319_2.png) [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)\ **Post date:** [14. September 2016 um 10:07 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/25 "2016-09-14T10:07:27Z")
@Padaja: Mach doch ein eigenes JS File mit deinen JS Anpassungen, welches du im Theme.php einbindest. Like: ``` protected $javascript = [ 'src/js/jquery.shopware-merx.js' ]; ``` Responsive / Bare müssen für die Template Entwicklung im Original Zustand bleiben -\> Tabu für dich 😉 Ansonsten hast du einen Fehler gemacht, wenn du bestehende Template Files bearbeitest. @all: Komplett hab ich das mit dem Canvas Menü auf Desktop nicht hingebracht. Verwenden nun eigenes Dropdown Menu. **Wichtig:** Es gibt von Shopware einen StateManager (Siehe Quellcode:[Github](https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js)) welcher die JS Funktionen aufruft, wenn man die Seite lädt oder wenn sich die Grösse ändert (z.b. iPad Quer auf Hoch). Sobald die Fenstergrösse geändert wird “feuert” der Statemanager und macht, was ihr wollt (z.b. Off Canvas aktivieren bei Grösse xs und s). Hier sagt man ich füge ein Plugin hinzu, welches auf den Selector \* (alles, z.b. ein DIV) hört, was das Attribut [data-offcanvas=“true”] hat. Die Funktion heisst “swOffcanvasMenu” und wird ausgeführt wenn die Viewportgrösse (“Fenstergrösse”) XS oder S beträgt. (Hier die Grössen: [Github](https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js#L3-L28)) ``` // OffCanvas menu .addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', ['xs', 's']) ``` Soviel mal als Basic.   **Update** : Muss nun doch das OffCanvas Menu realisieren…werde somit (nach Möglichkeit) die einzelnen Schritte aufschreiben und hier veröffentlichen. (15.Sept 2016 | 16:10) ---
**Author:** ![Arya\_Svitkona](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/arya_svitkona/32/15319_2.png) [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)\ **Post date:** [29. September 2016 um 13:15 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/26 "2016-09-29T13:15:57Z")
So, die erste Hürde ist geschafft! $(’#engelchor’).play(); **Anleitung für OffCanvas Navigation für \> Tablet (nicht komplett)** 1. neues Theme erstellen 2. im Themefolder (z.b. /theme/frontend/myTheme/frontend/\_public/js/) eine neue JS Datei anlegen (z.b. jquery.mytheme–offcanvas.js) 3. Diese JS Datei im Theme.php (unter „/theme/frontend/myTheme/“ zu finden) einbinden like: 4. JS Datei öffnen und folgendes hineinschreiben   1. Nun wird vom Statemanager das „Plugin“ ‚[swOffcanvasMenu](https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.off-canvas-menu.js)‘ und ‚[swSubCategoryNav](https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.subcategory-nav.js)‘ geladen, wenn die Bildschirmgrösse wechselt, oder das Fenster frisch geladen wird. Kann ja sein, dass man das Fenster im Browser kleiner macht, oder beim Tablet von Hoch auf Quer wechselt. In dem Moment wird das Script erneut ausgeführt. 2. Ab jetzt funktioniert das OffCanvas tech. bereits. Jedoch sieht man noch nicht viel davon, da einige Elemente via CSS ausgeblendet werden. 3. Hier ein wenig CSS (nicht sauber formatiert und bestimmt einiges zuviel / zuwenig drin), welches ihr ebenfalls in euer Theme einbauen sollt. 4. (wenn noch nicht gemacht) neues Less File erstellen unter „themes/Frontend/myTheme/frontend/\_public/src/less“ mit dem Namen „all.less“. 5. Inhalt: 6. (wenn noch nicht gemacht) neues Less File erstellen unter „themes/Frontend/Merx\_memo/frontend/\_public/src/less“ mit dem Namen „offcanvas-reset.less“ Inhalt: 7. Im Shopware Backend Theme Cache leeren und neu kompilieren (oder einfach das Theme dem Shop erneut zuweisen) 8. Neben dem Suchfenster erscheint eine Hamburger Navigation. Wenn ihr alles korrekt gemacht habt, erscheint nun eine OffCanvas Navigation (ein wenig minderwertig gestylt). 9. So, nun geh ich zurück an die Arbeit 😉 Gruss Arya\_Svitkona     ---
**Author:** ![hochhardt](https://avatars.discourse-cdn.com/v4/letter/h/97f17d/32.png) [@hochhardt](https://forum.shopware.com/u/hochhardt)\ **Post date:** [18. November 2016 um 09:38 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/27 "2016-11-18T09:38:47Z")
Hallo, ich habe alles wie in der Anleitung gemacht… leider funktioniert es nicht  Ich schreibe mal meine einzelnen Schritte auf vielleicht findet Ihr ja den Fehler… 1) \themes\Frontend\ThemeNeu\frontend\_public\src\js –\> Hier habe ich eine neue .js Datei eingefügt mit dem folgendne Inhalt: ``` window.StateManager //Führt JS aus, wenn Viewport wechselt von xs, s, m, l oder xl (Mobile - Desktop) // OffCanvas menu .addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', { fullscreen: true,//kann man auch auf false setzen },['xs', 's', 'm', 'l', 'xl']) .addPlugin('*[data-subcategory-nav="true"]', 'swSubCategoryNav', ['xs', 's', 'm', 'l', 'xl']) ; jQuery( window ).load(function( $ ) { }); ``` 2) \themes\Frontend\ThemeNeu\ ​–\> Hier habe ich in die Theme.php folgendes eingetragen: ``` protected $javascript = [ 'src/js/jquery.offcanvas.js' ]; ``` Die Theme.php sieht so aus: 3) \themes\Frontend\ThemeNeu\frontend\_public\src\less ​–\> Hier eine neue .less Datei eingefügt: offcanvas-reset.less mit dem folgenden Inhalt: ``` @media screen and(min-width: @tabletViewportWidth) { .shop--navigation .entry--menu-left{ display: block; } .sidebar-main.off-canvas.is--open{ display: block !important; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); left: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); background: #f5f5f8; position: fixed; z-index: 8000; .navigation--smartphone{ display: block; } .mobile--switches, .filter--container, .navigation--smartphone{ display: block; } .entry--close-off-canvas{ display: block; } .categories--headline{ display: block; } .shop-sites--container{ display: block; } .navigation--entry{ border-bottom: 1px solid #dadae5; margin: 0; padding: 0; } .navigation--link{ .unitize-padding(2, 10, 2, 10); .unitize(line-height, 38); } .is--icon-right{ display: block; } .icon--arrow-right, .icon--arrow-left{ display: block; } } .off-canvas { -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -moz-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -ms-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -o-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; width: 280px; width: 17.5rem; background: #fff; position: fixed; top: 0; bottom: 0; display: none; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 8000; } } ``` und anschließend in die all.less ganz am ende den folgenden Eintrag hinzugefügt: ``` @import "offcanvas-reset"; ```   Die Navigation sehe ich bereits allerdings öffnet sich das Offcanvas Menü nicht. Was habe ich flasch gemacht? ---
**Author:** ![Arya\_Svitkona](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/arya_svitkona/32/15319_2.png) [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)\ **Post date:** [18. November 2016 um 09:40 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/28 "2016-11-18T09:40:39Z")
Hast uns mal n Link zum Shop? ---
**Author:** ![hochhardt](https://avatars.discourse-cdn.com/v4/letter/h/97f17d/32.png) [@hochhardt](https://forum.shopware.com/u/hochhardt)\ **Post date:** [18. November 2016 um 09:59 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/29 "2016-11-18T09:59:10Z")
Habe ich dir soeben als PN zugeschickt. Danke! ---
**Author:** ![Arya\_Svitkona](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/arya_svitkona/32/15319_2.png) [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)\ **Post date:** [17. Januar 2017 um 13:36 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/30 "2017-01-17T13:36:04Z")
Hallo Zusammen, Habe mich nun eine rechte Zeit lang mit dem OffCanvas Menü auseinandergesetzt und muss wirklich sagen, es ist nicht so einfach wie es zu sein scheint. Hat seine Gründe, warum noch niemand eine komplette Anleitung (mehr als das von mir) geschrieben hat. Dennoch bin ich nun an einem Punkt an welchem ich nicht weiterkomme. Das OffCanvas Menü funktioniert prima bei Desktop, jedoch gehen nun andere Komponenten wie z.b. die Filterung davon aus, dass man sich auf einem Smartphone befindet und somit klappen die Filter als OffCanvas auf. Screeshot: [http://fs5.directupload.net/images/170117/x5x32k8a.jpg](http://fs5.directupload.net/images/170117/x5x32k8a.jpg) Dies soll jedoch nur auf Mobilegeräten passieren. Wie kann ich dies trennen? Verstehe nicht, warum “.action–filter-options” auch die Klasse “.off-canvas” via JS erhält. LG Arya\_Svitkona ---
**Author:** ![Arya\_Svitkona](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/arya_svitkona/32/15319_2.png) [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)\ **Post date:** [25. Januar 2017 um 10:12 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/31 "2017-01-25T10:12:36Z")
[@Philipp Schuch]([http://forum.shopware.com/profile/13283/Philipp](http://forum.shopware.com/profile/13283/Philipp) Schuch “Philipp Schuch”)‍ Ciao Philipp, gibt es da ev. einen Tipp von dir? Lieber Gruss nach Shöppingen ---
**Author:** ![Philipp\_Schuch](https://avatars.discourse-cdn.com/v4/letter/p/8797f3/32.png) [@Philipp\_Schuch](https://forum.shopware.com/u/Philipp_Schuch)\ **Post date:** [26. Januar 2017 um 08:37 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/32 "2017-01-26T08:37:41Z")
Hallo, die Filter sind auf mobile ebenfalls ein Offcanvas-Menü und werden auch über den zentralen Aufruf des Plugins initialisiert. Das erkennt man an dem Data-Attribut auf dem Trigger Button der Filter mit  **data-offcanvas=„true“**. ``` Filtern ``` Der zentrale Aufruf findet über den StateManager statt und wurde so registriert: ``` window.StateManager.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', ['xs', 's']); ``` Wenn Du das Offcanvas-Menü unabhängig von den anderen Lösungen behandeln möchtest, dann musst Du den Aufruf entfernen und für inidviduelle Lösungen einen eigenen Aufruf nur für das Menü machen. LG, Phil ---
**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\ **Post date:** [24. Juli 2018 um 11:13 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/33 "2018-07-24T11:13:59Z")
Hallo, ich muss das hier nochmal ausgraben.   > alle jQuery Plugins werden bei uns in der jquery.shopware-responsive.js definiert. > > themes/Frontend/Responsive/frontend/\_public/src/js/jquery.shopware-responsive.js > > In Zeile ~33 wird das OffCanvas Menu für den Viewport xs und s aktiviert. Hier kannst du deine gewünschten Viewports ergänzen (m, l, xl). wie kann ich diese Zeile denn in meinem eigenen Theme überschreiben? Ich weiß zwar, wie ich eine ganze Funktion überschreibe… aber wie nur eine Zeile? ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [24. Juli 2018 um 21:26 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/34 "2018-07-24T21:26:29Z")
Hallo, gerade solche Sachen sind doch aber ausführlich dokumentiert, siehe: [https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/?\_ga=2.155679742.451852135.1531755885-924015160.1463247506#working-with-stateful-jquery-plugins](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/?_ga=2.155679742.451852135.1531755885-924015160.1463247506#working-with-stateful-jquery-plugins) . Einfach eine JavaScript-Datei erstellen und das OffCanvas - Menü in den gewünschten Viewports ergänzen - das wird aber auch nicht ausreichen, da auch Filter und alles andere im OffCanvas - Menü angezeigt und somit ergänzt etc werden müssen. Grüße Sebastian ---
**Author:** ![apacojr](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@apacojr](https://forum.shopware.com/u/apacojr)\ **Post date:** [22. Dezember 2020 um 13:08 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/35 "2020-12-22T13:08:42Z")
Hi, I’m a newbie in Shopware development, just a quick question regarding offcanvas menu, is it possible to move the navigation menu to offcanvas menu? Could anyone recommend a guide on this?  Thank you in advance. [Vorherige Seite](https://forum.shopware.com/t/offcanvas-menu/26448.md?page=1)