Mega-Menü (Flyout)

Das Untermenü der Top-Navigation zeigt die Unterkategorien an, sobald ein Menüpunkt angesteuert wird. ThemeWare® bringt dafür fünf Darstellungsarten mit – vom breiten Flyout über die Kartenansicht bis zum kompakten Dropdown – und je Darstellungsart mehrere Stile für die Menüpunkte.

Darstellungsarten

Die Darstellungsart legst du im Tab "Header" => Bereich "Top-Navigation Flyout" => Konfiguration "Top-Navigation Flyout" fest. Sie gilt dann für die gesamte Hauptnavigation.

Tipp: Du kannst die Darstellungsart pro Kategorie überschreiben – zum Beispiel ein Flyout mit Teasern für "Bekleidung" und ein schlankes Dropdown für "Sale". Öffne dazu die Kategorie im Shopware-Admin und wähle unter "Zusatzfelder" => "Flyout (Genesis Pro)" => "Top-Navigation Flyout" die gewünschte Darstellungsart. Der Standardwert "vererbt aus Theme-Konfiguration" übernimmt die globale Einstellung. Mit "kein Untermenü" blendest du das Untermenü für eine einzelne Kategorie aus.

Standard Flyout

Das Flyout nutzt die volle Breite und zeigt die Unterkategorien in Spalten – die Darstellungsart mit dem meisten Platz für tiefe Kategoriebäume.

Flyout-Layout im Button-Stil

Flyout-Layout im Listen-Stil

Flyout-Layout im SW6-Stil

Sidebar

Die Unterkategorien der ersten Ebene stehen als Schiene links, der Inhalt daneben wechselt beim Ansteuern eines Eintrags. Das hält das Untermenü auch bei vielen Kategorien übersichtlich.

Sidebar-Layout im Button-Stil

Sidebar-Layout im Listen-Stil

Sidebar-Layout im SW6-Stil

Teaser

Neben den Kategorien stehen bis zu drei Teaser mit Bild, Text und Link – zum Beispiel für eine Aktion oder eine neue Kollektion. Je mehr Teaser du hinterlegst, desto mehr Platz bekommt der Teaser-Bereich. Die Teaser pflegst du an der Kategorie unter "Zusatzfelder" => "Flyout (Genesis Pro)".

Teaser-Layout im Button-Stil

Teaser-Layout im Listen-Stil

Teaser-Layout im SW6-Stil

Karten

Jede Unterkategorie der ersten Ebene wird als Karte mit ihrem Kategoriebild dargestellt. Kategorien ohne Bild erscheinen nicht als Karte – hinterlege also für alle Kategorien ein Bild, wenn du diese Darstellungsart nutzt.

Karten-Layout

Dropdown

Das Dropdown öffnet eine schmale Karte direkt unter dem Menüpunkt, statt die volle Breite zu nutzen – passend für flache Kategoriebäume oder einzelne Menüpunkte.

Dropdown-Layout im Button-Stil

Dropdown-Layout im "Button (kompakt)"-Stil

Dropdown-Layout im Listen-Stil

Stile

Wie die einzelnen Menüpunkte aussehen, legst du getrennt für Flyout und Dropdown fest:

• Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'" => Konfiguration "Stil"

  • Zur Wahl stehen "Liste (Shopware 6)", "Liste", "Liste in Spalten (Shopware 5)" und "Buttons".

• Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'" => Konfiguration "Stil"

  • Zur Wahl stehen "Liste", "Buttons (kompakt)" und "Buttons".

Der Flyout-Stil gilt auch für die Darstellungsarten "Karten", "Sidebar" und "Teaser" – mit einer Ausnahme: "Liste in Spalten (Shopware 5)" wirkt nur im Flyout (siehe unten).

Die Stile der Dropdown-Navigation sind noch in Entwicklung. Wir freuen uns über dein konstruktives Feedback.

Dropdown: Button-Stil

Du kannst den Button-Stil beim Hover nutzen oder die Buttons durchgängig einfärben:

Buttons bei Hover eingefärbt

Buttons durchgängig eingefärbt

Farben der Menüpunkte

Die Flächen der Menüpunkte färbst du im Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration" über die Konfigurationen "Hintergrundfarbe (Menüpunkte)", "Hintergrundfarbe (Menüpunkte) @hover" und "Hintergrundfarbe (Menüpunkte) @active". Im Flyout werden sie im Stil "Buttons" angewendet, in der Dropdown-Navigation in den Stilen "Buttons (kompakt)" und "Buttons".

Flyout und Dropdown greifen auf dieselben Farben zu und sehen dadurch auch dann gleich aus, wenn du beide Darstellungsarten parallel einsetzt.

"Liquid glass"-Effekt

Über die Konfiguration "Glaseffekt [px] (Panel)" – ebenfalls im Abschnitt "Farbkonfiguration" – zeichnest du den Seiteninhalt hinter dem Panel weich. Der Effekt wird erst sichtbar, wenn du als "Hintergrundfarbe (Panel)" eine halbtransparente Farbe wählst. Empfohlener Wert: 10.

Flyout-Layout im Button-Stil (Unschärfe)

Der Glass-Effekt funktioniert natürlich in allen Darstellungsarten:

Flyout: "Shopware 5" Stil

Der "Shopware 5"-Stil ändert die Spaltendarstellung im Flyout-Layout in die Anordnung im "Erweiterten Menü" von Shopware 5. Die Kategorien werden dabei nicht zeilenweise umbrochen, sondern fließen in vier Spalten – passt eine Kategorie nicht mehr in ihre Spalte, rutscht sie in die nächste. Steht neben den Kategorien ein Kategoriebild, sind es drei Spalten.

Der Stil wirkt nur im Flyout. Die Darstellungsarten "Karten", "Sidebar" und "Teaser" bringen ihre eigene Anordnung mit und verwenden den Stil "Liste".

Weil die Spalten nach Höhe gefüllt werden, ist dieser Stil weniger gut geeignet, wenn die Anzahl der Unterkategorien stark schwankt.