Flyout Navigation
Die Flyout-Navigation ist das Megamenü in Shopware 6, welches beim Überfahren der Kategorien die Unterkategorien darstellt.
Last updated
Die Flyout-Navigation ist das Megamenü in Shopware 6, welches beim Überfahren der Kategorien die Unterkategorien darstellt.
Last updated
Aktiviere die Flyout Navigation unter Header > Main Navigation > Grundeinstellungen > Unternavigation Aussehen
Die Hintergrundfarbe (1) des Flyout-Menüs kann auch eine teiltransparente Farbe sein. Über den Colorpicker kann die Sichtbarkeit im Alpha-Kanal hinterlegt werden.
Textfarbe (2) und Text:hover-Farbe (3) müssen nicht unterschiedlich sein. Beim Überfahren mit der Maus rücken die einzelnen Einträge ein paar Pixel zur Seite.
Über Volle Breite (1) stellst Du ein, ob das Menü die volle Breite des Themes ausnutzen soll. Über Flyout Header Zeile (2) kann der Bereich "Zur Kategorie XY >" ausgeblendet werden, um ein ablenkungsfreies Design zu kreieren. Verschiedene wählbare Animationen (5) runden das Konzept ab.
Das Kategoriebild kann über Flyout-Teaser (3) global ein oder ausgeschaltet werden. Oft wünscht man sich das Kategoriebild als Kategoriebild im Header der Folgekategorie, möchte dieses aber nicht in der Flyout-Navigation darstellen.
Icon bei externen Links (4) zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken "In neuem Tab öffnen" als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.
Der Gruppierungsrahmen links (6) hilft bei vielen Unterkategorien eine Abgrenzung der Spalten hervorzuheben, siehe Beispiel 3.
Die Navigations-Ebenen (7) geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.
Achtung: In den Einstellungen des Sales-Channels muss die Anzahl der Hauptnavigations-Ebenen mindestens so hoch sein wie hier angegeben.
Diese Einstellung behebt die Shopware Bugs NEXT-9461 und NEXT-13203.
Spalten (8) gibt an, auf wie viele Spalten die Menüpunkte im Flyout-Menü angeordnet werden sollen.
Über die Dynamische Spaltenfüllung (9) werden die Spalten auf Grund ihres verfügbaren Platzes aufgebaut. So können in einer Spalte auch mehrere Oberkategorien Platz finden.
Kategorie 1 Unterkategorie Unterkategorie Unterkategorie Kategorie 2 Kategorie 3 | Kategorie 4 Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie | Kategorie 5 Unterkategorie Unterkategorie Kategorie 6 Unterkategorie Unterkategorie Unterkategorie |
Aktivierst Du die Option Inhalte scrollbar (10) definiert Du mit der Maximale Höhe (11) die Begrenzung des Flyouts und die Darstellug der Scrollleisten. Damit kannst Du sicherstellen, dass Deine Kunden alle Navigationspunkte auch bei umfangreicheren Navigationen komfortabel erreichen können - auch wenn der Header Sticky ist.
Über die Einstellung im Block Elemente kannst Du die einzelnen Einträge der Flyout-Navigation formatieren.
Beispiel 1:
Die Hintergrundfarbe kann auch transparent sein. Mit der kleinen rgba-Funktion kann zusätzlich zur Farbe eine Sichtbarkeit angegeben werden.
rgba($sw-color-brand-primary, 90%)
Beispiel 2:
Beispiel 3:
