# Offcanvas Menü
**URL:** https://forum.shopware.com/t/offcanvas-menu/26448
**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:** 20
**Page:** 1
### Author:  [@Shopone](https://forum.shopware.com/u/Shopone)
#### Post date: [23. April 2015 um 12:29 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/1 "2015-04-23T12:29:47Z")
Hi, ich probiere erfolglos das Offcanvas Menü bei mobile/tablet auch bei Desktopbreite anzeigen zu lassen. Hat hier bitte jemand einen Tipp für mich? Danke 🙂 // Abseits Änderungen in offcanvas-menu.less & sidebar.less: Wenn ich es richtig sehe, liegt der Knackpunkt darin die .sidebar-main mit .off-canvas und .is–active zu ergänzen, da diese \< Tabletbreit angehängt werden. Ich denke das passiert irgendwo durch javascript aber wo? In der jquery.off-canvas-menu.js ja wohl nicht? Niemand eine Idee?
---
### Author:  [@Linus\_Holtstiege](https://forum.shopware.com/u/Linus_Holtstiege)
#### Post date: [27. April 2015 um 09:47 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/2 "2015-04-27T09:47:41Z")
Hallo shopone, 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). Anschließend musst du den OffCanvas Button noch in den weiteren Viewports anzeigen. Achtung: Die Sidebar und das OffCanvas Menü teilen sich denselben HTML DOM. Das heißt, du musst die Sidebar in den erweiterten Viewports anpassen oder eine andere Lösung dafür entwickeln. Ich hoffe dieser Ansatz hilft dir weiter.
---
### Author:  [@Shopone](https://forum.shopware.com/u/Shopone)
#### Post date: [28. April 2015 um 01:12 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/3 "2015-04-28T01:12:31Z")
Perfekt, Besten Dank!
---
### Author:  [@Nicky](https://forum.shopware.com/u/Nicky)
#### Post date: [7. Mai 2015 um 19:43 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/4 "2015-05-07T19:43:02Z")
[quote]Anschließend musst du den OffCanvas Button noch in den weiteren Viewports anzeigen. [/quote] Wie kann man den Button in den weiteren Viewports anzeigen lassen? Vielen Dank vorab 🙂
---
### Author:  [@redwise](https://forum.shopware.com/u/redwise)
#### Post date: [15. Juni 2015 um 10:19 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/5 "2015-06-15T10:19:41Z")
Beitrag neu eingestellt…
---
### Author:  [@einfachich](https://forum.shopware.com/u/einfachich)
#### Post date: [21. August 2015 um 18:15 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/6 "2015-08-21T18:15:36Z")
Hallo Zusammen, wenn man schon mal beim Thema Off Canvas sind. Ich hab da momentan ein Problem wo ich nicht so richtig weiterkomme. Jedes mal wenn ich mit den Handy eine Kategorie im Canvas auswähle, geht danach das Menü nicht mehr… Leider komme ich aber nicht so richtig dahinter warum. Ich bekomme immer wieder diesen Fehler: `Uncaught TypeError: Cannot read property 'ownerDocument' of undefined` Dieser Fehler tritt nur bei den Listing der Kategorien auf, bei den restlichen Seite funktioniert das Off Canvas Menü. Vielleicht hat jemand ein Rat für micht. Ich danke soweit und wünsche ein schönes Wochenende. MfG Tobias
---
### Author:  [@master\_1](https://forum.shopware.com/u/master_1)
#### Post date: [31. August 2015 um 22:03 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/7 "2015-08-31T22:03:38Z")
und bei mir öffnet der Hamburger auf der Startseite kein Menü + die Suchgrafik kein Suchfeld , aber auf allen Unterseiten 🙂
---
### Author:  [@Star\_E-Commerce](https://forum.shopware.com/u/Star_E-Commerce)
#### Post date: [14. September 2015 um 12:08 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/8 "2015-09-14T12:08:28Z")
[quote=“einfachich”]Vielleicht hat jemand ein Rat für micht.[/quote] Hi Tobias, ich stand vor dem selben Fehler, hab aber nun das Problem gelöst. Ich hatte in meinem Template frontend/listing.index.tpl den Block frontend\_index\_content\_left überschrieben, damit die Sidebar-Navigation in der Desktop-Ansicht nicht angezeigt wird. Dadurch funktioniert dann aber auch das Offcanvas-Menü nicht mehr, weil das Element nicht gefunden wird. Meine Lösung war dann den Block nicht im Template zu überschreiben, sondern einfach die Sidebar-Navigation für die Desktop-Ansicht per CSS auszublenden. Ich hoffe ich konnte dir (oder anderen) damit weiterhelfen. Gruß Jan
---
### Author:  [@fulmartin](https://forum.shopware.com/u/fulmartin)
#### Post date: [11. November 2015 um 10:11 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/9 "2015-11-11T10:11:00Z")
Bei mir werden die jeweiligen Untermenüs der Kategorien im Offcanvas nicht geladen. Bei einem Klick auf der Kategorie werde ich direkt auf die Seite weiterverlinkt. In der mobilen Ansicht funktioniert es wie gehabt. Muss ich hier auch ein jQuery Plugin in den Viewports erweitern? Nachtrag: “.addPlugin(’\*[data-subcategory-nav=“true”]’, ‘swSubCategoryNav’,” musste ergänzt werden!
---
### Author:  [@Zaris](https://forum.shopware.com/u/Zaris)
#### Post date: [15. Februar 2016 um 14:49 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/10 "2016-02-15T14:49:13Z")
Ich bringe ungern einen Thread der mehre Monate alt ist wieder hervor aber…
ich bräuchte hier dringend hilfe. Ich habs zwar geschafft dass das Offcanvas sich aktiviert eim drücken des Menu Buttons… Problem ist es kommt keine Navie hervor. Ich habe es zwar geschafft noch das die Sidebar angezeigt wird aber nicht im gewand vom Smartphone Style… sondern wie die standart Sidebar…
ich habe verstehe leider nicht was mit dem HTML DOM gemeint ist genau… und wie man das abändern kann… hat da jemand einen rat für mich?
Danke im vorraus
---
### Author:  [@runde8](https://forum.shopware.com/u/runde8)
#### Post date: [15. März 2016 um 11:37 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/11 "2016-03-15T11:37:21Z")
Ich würde das auch gerne nochmal reaktivieren!
Habe gerade ein ähnliches Problem, würde das Offcanvas Menü für Tablets aktivieren.
Der StateManager ist auch entsprechend erweitert
```
StateManager.addPlugin('*[data-offcanvas="true"]', 'swOffcanvasMenu', ['xs', 's', 'm', 'l']);
```
Nun finde ich aber gerade nicht die passende Stelle um das Offcanvas Overlay auch zu aktivieren!
Bei 400px
Und entsprechend bei 1000px…
Ich stehe auf dem Schlauch…
---
### Author:  [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)
#### Post date: [7. Juni 2016 um 12:18 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/12 "2016-06-07T12:18:09Z")
Ciao,
Auch ich beschäftige mich mit der implementation des Off Canvas Menü.
Würde sich jeman die Zeit nehmen und die einzelnen Schritte erklären?
1. Breakpoint herausfinden für welche das Menü verfügbar sein sollte. -\> xs s m l xl
2. themes/Frontend/DEINTEMPLATE/frontend/\_public/src/js/jquery.shopware-responsive.js auf Zeile 33 anpassen
3. CSS anpassen, damit “Hamburger Menü Icon” angezeigt wird
und nun komm ich nicht weiter…
---
### Author:  [@sschreier](https://forum.shopware.com/u/sschreier)
#### Post date: [7. Juni 2016 um 12:20 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/13 "2016-06-07T12:20:48Z")
> [@Arya\_Svitkona schrieb:](https://forum.shopware.com/profile/21097/Arya_Svitkona "Arya\_Svitkona")
>
> Ciao,
>
> Auch ich beschäftige mich mit der implementation des Off Canvas Menü.
> Würde sich jeman die Zeit nehmen und die einzelnen Schritte erklären?
>
> 1. Breakpoint herausfinden für welche das Menü verfügbar sein sollte. -\> xs s m l xl
> 2. themes/Frontend/Responsive/frontend/\_public/src/js/jquery.shopware-responsive.js auf Zeile 33 anpassen
>
> // OffCanvas menu
> .addPlugin(‚\*[data-offcanvas=„true“]‘, ‚swOffcanvasMenu‘, [‚xs‘, ‚s‘, ‚m‘, ‚l‘, ‚xl‘])
>
> 1. CSS anpassen, damit „Hamburger Menü Icon“ angezeigt wird
>
> @media screen and (min-width: @phoneLandscapeViewportWidth){
> .shop–navigation .entry–menu-left{
> display: block;
> }
> }
>
> und nun komm ich nicht weiter…
Hallo,
dafür gibt es doch aber sehr gute Dokumentationen, die sich mit dem Thema detailiert auseinandersetzen: [jQuery plugins and the StateManager](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#working-with-stateful-jquery-plu) .
Beziehungsweise sollte man im Responsive - Theme **niemals** Änderungen vornehmen - außer man möchte, dass diese beim nächsten Update (eventuell) wieder überschrieben sind.
Beste Grüße
Sebastian
---
### Author:  [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)
#### Post date: [7. Juni 2016 um 12:25 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/14 "2016-06-07T12:25:16Z")
Hallo Sebastian,
Besten Dank für den Link. Ich habe bereits einige Stunden in die Doku investiert und war auch an beiden Template Schulungen, welche ich bestanden habe.
Mir fehlt leider ein praktisches „sinnvolles“ Beispiel um mein Wissen zu erweitern.
Beim Scroll ein „console.log“ Eintrag zu schreiben kann ich nun doch bereits 🙂
Nein, es wird nix im responsive überschrieben, das habe ich gleich angepasst. Natürlich alles immer im eigenen Template.
LG Arya\_Svitkona
---
### Author:  [@sschreier](https://forum.shopware.com/u/sschreier)
#### Post date: [7. Juni 2016 um 12:29 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/15 "2016-06-07T12:29:34Z")
> [@Arya\_Svitkona schrieb:](https://forum.shopware.com/profile/21097/Arya_Svitkona "Arya\_Svitkona")
>
> Hallo Sebastian,
>
> Besten Dank für den Link. Ich habe bereits einige Stunden in die Doku investiert und war auch an beiden Template Schulungen, welche ich bestanden habe.
> Mir fehlt leider ein praktisches „sinnvolles“ Beispiel um mein Wissen zu erweitern.
> Beim Scroll ein „console.log“ Eintrag zu schreiben kann ich nun doch bereits 
>
> Nein, es wird nix im responsive überschrieben, das habe ich gleich angepasst. Natürlich alles immer im eigenen Template.
>
> LG Arya\_Svitkona
Hallo,
beim praktischen Beispiel zum erweiterten Menü von Shopware aus der zweiten Template Schulung „Advanced Template Training“ war doch aber schon alles dabei, was man dafür an Wissen braucht?
Beste Grüße
Sebastian
---
### Author:  [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)
#### Post date: [7. Juni 2016 um 12:32 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/16 "2016-06-07T12:32:39Z")
Nun, der Kurs wurde von mir vor knapp 1 Monat besucht und bis dahin habe ich nur mit LESS und Smarty gearbeitet.
Bin absolut frisch in der JS Welt von Shopware.
Bevor ich nun beginne eigene JS Files zu schreiben und alles versuche zu übersteuern, würde ich gerne mit den vorhandenen Funktionen arbeiten.
Wäre es denn eine grosse Sache, die paar Schritte hier für die Nachwelt zu notieren? 🙂
Beste Grüsse
Arya\_Svitkona
---
### Author:  [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)
#### Post date: [9. Juni 2016 um 07:35 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/17 "2016-06-09T07:35:23Z")
> Wäre es denn eine grosse Sache, die paar Schritte hier für die Nachwelt zu notieren? 
Ich möchte mich gerne erneut an euch wenden bezüglich des Off Canvas Menü.
Bereits knapp zwei Tage befasse ich mich mit dem Code und den zu vergebenen Klassen, damit die Sidebar richtig dargestellt wird.
Jedoch fehlen mir viele Informationen dazu, wie die Navigation funktioniert, im Bezug auf die Sidebar.
Die Sidebar in der Kategorieansicht ist komplett anders wie diese im OffCanvas Menü.
Lieber Gruss
Arya\_Svitkona
---
### Author:  [@DannyDan](https://forum.shopware.com/u/DannyDan)
#### Post date: [30. Juli 2016 um 22:12 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/18 "2016-07-30T22:12:05Z")
Nabend,
sind mittlerweile schon zwei Monate her seit dem letzten Eintrag von Arya\_Svitkona. Ich stehe derzeit vor dem gleichen Problem.
Wenn man auf den Burger klickt, wird das dunkle Overlay angezeigt, aber es wird kein Off-Canvas-Menu angezeigt.
Gibt es hierfür evtl. einen Tip dazu?
Gruss
Danny
---
### Author:  [@DannyDan](https://forum.shopware.com/u/DannyDan)
#### Post date: [31. Juli 2016 um 11:57 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/19 "2016-07-31T11:57:59Z")
So, neuer Tag neues Glück. 😉
Habe jetzt mit frischem Kopf das ganze selbst gefunden.
Es muss lediglich noch das CSS herausgenommen werden in der sidebar.less.
---
### Author:  [@sanders](https://forum.shopware.com/u/sanders)
#### Post date: [6. September 2016 um 13:05 UTC](https://forum.shopware.com/t/offcanvas-menu/26448/20 "2016-09-06T13:05:45Z")
Hallo zusammen,
Ist jemand bereit alle Steps zu teilen, wie die OffCanvas Sidebar auf Desktop-Ansichten zu öffnen ist?
Ich experimentierte mit einer Kombination aller Vorschläge, aber ohne Erfolg.
Danke vielmals!
Sander
[Nächste Seite](https://forum.shopware.com/t/offcanvas-menu/26448.md?page=2)