Mega Menu & Burger — Vollständige Anleitung

Überblick

Das Modul Mega Menu & Burger (datafireflymegamenu) ersetzt die Navigation Ihres Shops durch ein vollständiges, konfigurierbares System: ein mehrspaltiges Mega-Menü, ein klassisches rekursives Walker-Dropdown-Menü und ein flüssiges Burger-Menü auf Mobilgeräten. Alles wird visuell im Back-Office per Drag-and-drop aufgebaut, ohne eine Zeile Code anzufassen.

Jedes Menü kann Kategorien, Produkte (mit Foto und Preis), Marken, CMS-Seiten, benutzerdefinierte Links, freie HTML-Blöcke oder Werbebilder anzeigen, organisiert in Spalten innerhalb von Mega-Panels. Das Modul ist vollständig mehrsprachig und Multishop-fähig, und das Element, das der besuchten Seite entspricht, wird automatisch hervorgehoben.

Kompatibilität

• PrestaShop 8.0 bis 9.x
• PHP 7.4 bis 8.x
• Einzelshop und Multishop
• 5 mitgelieferte Sprachen: FR, EN, ES, DE, IT (und unbegrenzt übersetzbar)
• Classic-Theme und individuelle Themes
• PSR-4-Architektur ohne Composer-Abhängigkeit

Installation

1. Öffnen Sie im Back-Office Module > Modul-Manager.
2. Klicken Sie auf Modul hochladen und wählen Sie die Datei datafireflymegamenu.zip.
3. Klicken Sie nach der Installation auf Konfigurieren.

Schnellstart

1. Öffnen Sie die Modulkonfiguration. Links die Liste Meine Menüs und die Menü-Einstellungen; rechts die Menüstruktur.
2. Klicken Sie auf Neues Menü, geben Sie ihm einen Namen (pro Sprache), wählen Sie seinen Anzeige-Hook und sein Layout, dann speichern.
3. Klicken Sie im Bereich Menüstruktur auf Wurzelelement hinzufügen und wählen Sie seinen Typ.
4. Ziehen Sie Elemente per Drag-and-drop, um sie neu zu ordnen oder zu verschachteln. Positionen werden automatisch gespeichert.

Menü-Einstellungen

Das Panel Menü-Einstellungen steuert das globale Verhalten eines Menüs:

• Menüname: interne Bezeichnung, pro Sprache übersetzbar.
• Anzeige-Hook: Ort, an dem das Menü gerendert wird (siehe Abschnitt Anzeige und Hooks).
• Layout: Mega-Menü (Spalten-Panels) oder Klassisches Dropdown (rekursiver Walker).
• Öffnen bei: Untermenüs öffnen beim Überfahren oder beim Klicken. Beim Überfahren verhindert eine kurze Schließverzögerung das Flackern bei diagonalen Bewegungen.
• Mobiler Breakpoint (px): Breite, unterhalb derer das Menü in den Mobil-/Burger-Modus wechselt (standardmäßig 991 px).
• Maximale Breite (px): zentriert die Leiste auf der gewählten Breite, um sie am Theme-Container auszurichten (z. B. 1140 px). 0 = volle Breite.
• Sticky-Leiste: das Menü bleibt beim Scrollen oben fixiert.
• Mega-Panels in voller Breite: Mega-Panels erstrecken sich über die gesamte Breite der Leiste.
• Burger-Menü auf Mobilgeräten: aktiviert das Burger-Menü unterhalb des Breakpoints.
• Aktiviert: zeigt oder verbirgt das Menü im Front-Office.
• Shops (Multishop): wählt die Shops, in denen das Menü angezeigt wird.

Den Baum aufbauen (Drag-and-drop)

Die Struktur eines Menüs wird im Bereich Menüstruktur aufgebaut. Jede Zeile stellt ein Element dar, mit einem Ziehgriff, einer Pille für den Typ und Aktionsschaltflächen.

• Neu ordnen: greifen Sie den Griff und bewegen Sie das Element vertikal.
• Verschachteln: legen Sie ein Element in einem anderen ab, um es zum Unterelement zu machen (unbegrenzte Verschachtelung).
• Unterelement hinzufügen: eigene Schaltfläche in jeder Zeile.
• Bearbeiten / Löschen: Symbole in jeder Zeile. Das Löschen eines Elements löscht auch seine Unterelemente.

Elementtypen

Jedes Element hat einen Typ, der seinen Inhalt und seinen Link bestimmt. Das Bearbeitungsfenster passt die verfügbaren Felder automatisch an den gewählten Typ an:

• Benutzerdefinierter Link: eine freie URL, pro Sprache übersetzbar.
• Kategorie: Link zu einer Shop-Kategorie, mit optionalem Bild und Produktzähler.
• Kategoriebaum (automatisch): erzeugt die Unterkategorien automatisch (siehe eigener Abschnitt).
• Produkt: Link zu einer Produktseite, mit optionalem Titelbild und Preis.
• Marke: Link zu einer Marke; Alle Marken: Link zur Markenseite.
• Lieferant: Link zu einem Lieferanten.
• CMS-Seite und CMS-Kategorie: Links zu Ihren redaktionellen Inhalten.
• HTML-/CMS-Block: freier HTML-Inhalt, ideal für eine Promo oder formatierten Text.
• Bild / Promo: ein klickbares Bild (mit URL).
• Beschriftung: ein einfacher, nicht klickbarer Titel, nützlich als Spaltenüberschrift.
• Trennlinie: eine Trennlinie — horizontal in Dropdown- und Mega-Panels, vertikal zwischen den Elementen der Leiste.

Für jedes Element können Sie außerdem festlegen: eine Beschriftung, ein farbiges Badge (Text + Farbe), ein Material-Icon, eine benutzerdefinierte CSS-Klasse, das Öffnen in einem neuen Tab und die Sichtbarkeit pro Gerät (Mobil, Tablet, Desktop).

Anzeigeoptionen: Bilder, Preise und Zähler

Je nach gewähltem Typ bietet das Bearbeitungsfenster einen Block Anzeigeoptionen:

• Bild anzeigen (Kategorie, Kategoriebaum, Produkt): zeigt das Kategoriebild oder das Produkt-Titelbild als Miniatur im Menü. Deaktivieren Sie es für ein reines Textmenü. Ein manuell auf das Element hochgeladenes Bild hat immer Vorrang.
• Produktpreis anzeigen (Produkt): zeigt den Produktpreis, formatiert nach Währung und Sprache des Besuchers, rechts neben der Beschriftung.
• Produktzähler anzeigen (Kategorie, Kategoriebaum): zeigt als Pille die Anzahl der aktiven Produkte der Kategorie, Unterkategorien eingeschlossen.
• „Alle anzeigen“-Link anhängen (Kategoriebaum): fügt am Ende der Liste einen Link zur Wurzelkategorie des Baums hinzu.

Mega-Menü: Spalten, Bilder und HTML-Blöcke

Um ein Untermenü in ein Mega-Panel zu verwandeln, öffnen Sie das Elternelement und stellen Sie Untermenü-Anzeige auf Mega panel (Spalten). Legen Sie dann die Anzahl der Spalten fest.

Jedes direkte Kind des Elternelements wird dann zu einer Spalte des Panels. Sie können die Breite jeder Spalte über ihr Feld Spaltenbreite (Span) anpassen und Unterlinks, einen HTML-Block oder ein Werbebild hineinlegen.

Automatischer Kategoriebaum

Der Typ Kategoriebaum (automatisch) erspart jede manuelle Eingabe: er erzeugt seine Unterkategorien selbst aus einer Wurzelkategorie, bis zu der im Feld Unterebenen festgelegten Ebene.

Seine Anzeigeoptionen lassen Sie Kategoriebilder (Miniaturen), den Produktzähler pro Kategorie und einen „Alle anzeigen“-Link zur Wurzelkategorie, der am Ende der Liste angehängt wird, ein- oder ausschalten.

Kombinieren Sie diesen Typ mit einer Mega panel-Anzeige, um in Sekunden ein vollständiges „Shop“-Mega-Menü zu erhalten, das immer mit Ihrem Katalog synchron bleibt.

Mehrsprachig und Multishop

Die Beschriftung, die benutzerdefinierte URL, das Badge und der HTML-Inhalt jedes Elements sind über die Sprach-Tabs des Bearbeitungsfensters übersetzbar. Auch der Menüname ist mehrsprachig.

Im Multishop wird jedes Menü über seine Einstellungen einem oder mehreren Shops zugewiesen. Dasselbe Menü kann so nur in bestimmten Shops angezeigt werden.

Anzeige, Hooks und Position

Ein Menü wird über den in seinen Einstellungen gewählten Hook angezeigt. Die unterstützten Hooks sind:

• displayNav2 — Hauptnavigationsleiste (Standard)
• displayTop — Seitenanfang, neben Logo und Suchleiste
• displayNavFullWidth — Banner in voller Breite
• displayFooter — Fußzeile
• displayLeftColumn und displayRightColumn — Seitenspalten

Auf displayTop passt sich die Leiste automatisch der Breite ihres Inhalts an, um sich mit Logo und Suchleiste des Themes dieselbe Zeile zu teilen; Mega-Panels in voller Breite werden dort auf dem Bildschirm zentriert.

Aktuelle Seite und Navigation

Das Menüelement, das der besuchten Seite entspricht — und sein Wurzelelement — erhalten automatisch die Klasse is-active und werden gemäß dem Hover-Stil des Menüs hervorgehoben. Die Erkennung erfolgt im Browser (exakte URL-Übereinstimmung, dann beste Bereichsübereinstimmung) und bleibt damit vollständig kompatibel mit dem Render-Caching.

Mobilmodus und Burger-Menü

Unterhalb des festgelegten Breakpoints wechselt das Menü automatisch in den Mobilmodus. Wenn die Option Burger-Menü auf Mobilgeräten aktiv ist, nimmt die Navigation die Form eines Burger-Menüs an: Slide-in-Panel, Akkordeon-Untermenüs, abgedunkelter Hintergrund (Backdrop) und Scroll-Sperre der Seite.

Das Modul respektiert die Systemeinstellung reduzierte Bewegung (prefers-reduced-motion), indem es Animationen für betroffene Nutzer deaktiviert.

Leistung und Cache

Das Rendering jedes Menüs wird von Smarty gecacht, mit einem Schlüssel, der Menü, Sprache, Shop, Währung und Kundengruppe berücksichtigt. Menüs werden so ohne Neuberechnung auf jeder Seite angezeigt.

Der Cache wird automatisch invalidiert, wenn eine Kategorie, eine CMS-Seite oder eine Marke hinzugefügt, geändert oder gelöscht wird, sowie bei jedem Speichern eines Menüs oder Elements im Back-Office. Automatische Bäume, Produktzähler und Preise bleiben so mit Ihrem Katalog synchron.

FAQ und Fehlerbehebung

Das Menü erscheint nicht im Front-Office

Prüfen Sie, ob das Menü aktiviert ist, ob es dem richtigen Shop zugewiesen ist und ob sein Hook einem tatsächlich von Ihrem Theme angezeigten Ort entspricht. Leeren Sie dann den PrestaShop-Cache und laden Sie im privaten Modus neu.

Der gewählte Hook erscheint nicht in meinem Theme

Nicht alle Themes implementieren jeden Hook. Wählen Sie einen tatsächlich in Ihrem Theme vorhandenen Hook (oft displayNav2 oder displayTop), oder hängen Sie das Modul über die Positionen-Seite an einen individuellen Hook an.

Mein Mega-Menü zeigt keine Spalten

Öffnen Sie das Elternelement und stellen Sie Untermenü-Anzeige auf Mega panel (Spalten), legen Sie die Spaltenanzahl fest und prüfen Sie, ob Kindelemente existieren: jedes direkte Kind wird zu einer Spalte.

Kategorie- oder Produktbilder werden nicht angezeigt

Prüfen Sie, ob das Kästchen Bild anzeigen in den Anzeigeoptionen des Elements angehakt ist, ob die Kategorie tatsächlich ein Bild hat (oder das Produkt ein Titelbild), und leeren Sie dann den Cache. Für ein bildfreies Menü deaktivieren Sie einfach diese Option.

Das Menü bricht um oder verschiebt die Suchleiste (displayTop)

Seit Version 1.2.1 passt sich die Leiste auf displayTop ihrem Inhalt an. Wenn das Problem nach dem Update weiterbesteht, leeren Sie den PrestaShop-Cache: das gecachte HTML muss mit den neuen Klassen neu erzeugt werden.

Änderungen erscheinen nicht sofort

Da das Rendering gecacht wird, leeren Sie den PrestaShop-Cache nach einer manuellen Änderung. Änderungen an Kategorien, CMS-Seiten, Marken, Menüs und Elementen invalidieren den Cache automatisch.

Ist es mit PrestaShop 9 kompatibel?

Ja. Das Modul ist mit PrestaShop 8 und 9 kompatibel, im Multishop und mehrsprachig, und behandelt die technischen Unterschiede zwischen beiden Versionen nativ. Im Menü angezeigte Preise verwenden den Locale-Formatter von PrestaShop 9 mit automatischem Fallback auf PrestaShop 8.