Flex Menu

Organisation der Menupunkte

Mit einem Klick in die Titelleiste des Menueintrages, kannst du zur besseren Übersicht im Backend ein gesonderten Titel für diesen Eintrag festlegen. Durch die Wahl der Option Manueller Titel kannst du zusätzlich einen eigenen Menupunktnamen vergeben, der dann als Titel des Menupunktes im Frontend verwendet wird. Das Umsortieren der Menupunkte gelingt einfach per Drag'n'Drop.

Grundlegende optische Anpassungen

Mit der Ausrichtung legst du die Orientierung deines Menupunktes fest. Den Warenkorb oder auch die Suche kannst du so bspw. rechts im Menu anordnen, alle anderen Einträge links (Standard).

Mit der Option Icon verwenden kannst du wahlweise ein Bild (Upload) oder ein Font-Icon vor deinen Menueintrag setzen. Evo, das Standard Template im JTL-Shop 4, bringt mit Font Awesome bereits zahlreiche Icons mit. Solltest du dieses Template verwenden, setze für Font Icon CSS Klasse den Wert fa fa-home, um vor deinem Menupunkt ein Haus als Icon einzufügen.

Schließlich kannst du deinen Menupunkten noch gesonderte CSS Klassen zuweisen, um diese gezielt stylen zu können.

Solltest du deinen Menupunkt nur unter bestimmten Bedingungen anzeigen wollen, z.B. für eine bestimmte Kundengruppe, kann dir die Option Darstellungsfilter weiterhelfen. Diese erlaubt es dir, ähnlich wie bei einem Drop selbst, die Darstellung des Menupunktes feingranular mit Filtern zu steuern.

Übrigens: das Flex Menu Drop bringt eine smarte Designerkennung mit. Schriftgrößen und Farben deines Menus passen sich mit einem Klick an die Optik deines Shops an. Mehr dazu im Abschnitt Konfiguration.

Konfiguration der Inhalte

Die Konfiguration der Inhalte unterscheidet sich stark nach deren Art, ist aber weitestgehend selbsterklärend. Bitte beachte hier auch die Tooltips im Flex Menu Drop selbst. Einige Anwendungsfälle werden wir nachfolgend jedoch detaillierter beschreiben.

Bei umfangreichen Inhalten ist auch das Verhalten auf mobilen Geräten wichtig. Erfahre dazu mehr im Abschnitt Responsives Verhalten.

Unterkategorien

Der wohl gängigste Anwendungsfall für Inhalte von Kategorie-Menupunkten sind Unterkategorien. Für diese kannst du verschiedene Darstellungsformen wählen: Bild und Titel, Nur Bild, Linkliste, Slider und Index.

Einfache Darstellung mit Bild und Titel

Unterkategorien als Slider

Ein Index für umfangreiche Kategorielisten

Je nach Darstellungsform der Unterkategorien unterscheiden sich auch deren Einstellungen, insbesondere in Sachen Kategorietiefe: bei der Linkliste können über die Einstellung Tiefe auch Unterkategorien der zweiten Ebene angezeigt werden.

Linkliste mit zweiter Kategoriebene im Back- und Frontend

Kombinationsinhalte

Mit sogenannten Kombinationsinhalten kannst du mit wenigen Klicks in gefilterte Artikellisten (also Kategorien, Hersteller oder Merkmalwerte) verlinken.

Ein Beispiel: du führst viele verschiedenfarbige Artikel eines Herstellers. Bei diesen Artikeln hast du die Farbe als Merkmal gepflegt. Erstellst du nun im Hersteller-Menupunkt den Kombinationsinhalt Merkmalwerte mit dem Merkmal Farbe, erzeugt das Flex Menu direkt Links auf diese Herstellerseite mit dem aktiven Farbfilter, bspw. /Hersteller__Blau.

Die Darstellungsform von Kombinationsinhalten kannst du ebenfalls bestimmen. Im obigen Beispiel siehst du für die Merkmalwerte die Darstellung Nur Bild und für die Kategorieliste Linkliste, auch möglich sind Bild und Titel sowie Slider.

Abschließend alle Kombinationationsinhalte mit einigen Beispiel-URLs (Kategorien: Schuhe, Hersteller: Nike, Merkmalwert: Farbe = rot, Spezialseite: Bestseller):

Tipp: wenn du Kombinationsinhalte nutzt, prüfe bitte auch, ob die Indizierungseinstellungen des JTL-Shops deinen Anforderungen entspricht. Durch die teils identischen Ergebnislisten (im Beispiel: /Schuhe::Nike und /Nike:Schuhe) ist die Gefahr von Duplicate Content groß, weshalb der JTL-Shop viele der Seiten von der Indizierung durch Suchmaschinen ausschließt.

Boxendarstellung der Inhalte

Jeder Inhalt kann optional mit einer betitelten Box umschlossen werden. Auch bei umfangreichen Inhalten kannst du so Struktur und Übersichtlichkeit bewahren.

Mit der Angabe eigener CSS Klassen für die Box hast du außerdem die Möglichkeit, dein Inhalt gezielt per CSS zu stylen. Die Mitgabe dieser CSS Klassen funktioniert übrigens auch, wenn die Box keinen Titel und keinen Rahmen hat, also für den Besucher unsichtbar ist.

Beliebige Drops verlinken

Über den Menuinhalt HTML Inhalt ist es dir möglich, beliebige Drops in deinem Flex Menu Dropdown zu verlinken! Ziehe dazu dein Drop einfach per Drag'n'Drop aus der Sidebar in den gewünschten Bereich.

Anzeigepriorität im Menupunkt

Die Anzeigepriorität eines Menupunktes legt dessen Verhalten fest, falls nicht mehr genügend Raum vorhanden sein sollte, um alle Punkte deines Menus anzuzeigen. Folgende Optionen sind möglich:

• Sehr Niedrig: der Menupunkt wird im Standard immer versteckt
• Niedrig: falls die Breite nicht mehr ausreicht, um alle Menupunkte gleichzeitig darzustellen, wird dieser Menupunkt, zusammen mit allen anderen Menupunkten, die ebenfalls eine niedgrige Anzeigepriorität haben, versteckt
• Mittel: wird versteckt, falls der Platz nur noch für Menupunkte mit hoher Anzeigepriorität ausreicht oder zu viele Menupunkte mit mittlerer Priorität existieren
• Hoch: das Flex Menu Drop versucht, den Menupunkt solange wie möglich sichtbar zu halten

"Versteckt" bedeutet in diesem Zusammenhang übrigens nicht, dass der Menupunkt gänzlich verschwindet. Er wird nur in ein Alternativmenu verschoben, dessen Inhalte über eine spezielles Hamburger-Menu-Icon erreichbar ist.

Sichtbarkeiten eines Menupunktes

Neben der Anzeigepriorität können noch spezielle Bedingungen zur Sichtbarkeit des Menupunktes definiert werden. So ist es möglich, bestimmte Punkte nur auf mobilen Geräten oder bei angeheftetem Menu anzeigen zu lassen. Sollten die hier gegebenen Konditionen nicht zutreffen, wird der Menupunkt ausgeblendet und ist dann auch nicht mehr im Alternativmenu auffindbar.

Der Menupunkt Warenkorb ist im Standard bspw. so konfiguriert, dass er nur auf mobilen Geräten oder bei angehefteten Menus angezeigt wird.

Dropdown Verhalten

Auf mobilen Geräten ist häufig nicht der Platz vorhanden, um die mitunter komplexen Inhalte in den Dropdowns deiner Menueinträge anzuzeigen.
Im Konfigurationsbereich des Mega Menu Drops findest du daher die Einstellung Dropdowns anzeigen auf, mit der du die Gerätetypen bestimmen kannst, auf dem Dropdowns angezeigt werden sollen.

Allgemein

Solltest du das Evo Template (Standard im JTL-Shop 4) verwenden, kannst du das von JTL ausgelieferte Flex Menu mit der Option Standard Menu entfernen? entfernen.

Ein Caching bieten wir an, jedoch zunächst nur auf experimentieller Basis. Aktiviere die Option Caching nutzen? also nur, wenn du dir sicher bist und das Verhalten ausgiebig getestet hast. Und insbesondere nur dann, wenn die Inhalte deines Menus sich auf verschiedenen Shopseiten nicht ändern. Ein Beispiel hierfür wären in Menuinhalten verlinkte Drops, deren Sichtbarkeit zusätzlich über Darstellungsfilter gesteuert werden.

Dropdowns

Im Abschnitt zum Responsiven Verhalten spielte dieser Reiter bereits eine Rolle. Hier konfigurierst du das responsive Verhalten und einige optische Feinheiten der Dropdowns deiner Menueinträge.

Mit der Option Dropdowns anzeigen auf legst du fest, auf welchen Endgeräten Dropdowns angezeigt werden sollen. Bei mobilen Geräten bietet es sich evtl. an, diese auszublenden.

Du kannst sogar Dropdown Inhalte via Ajax laden lassen. Das ist besonders dann sinnvoll, wenn du viele (große) Inhalte in den Dropdowns deines Flex Menus anzeigen lässt: mit aktivierten Option werden die Inhalte erst bei der Aktivierung des Menueintrags geladen und die initiale Ladezeit deiner Seite veringert sich dadurch.

Schließlich hast du noch die Möglichkeit, den Typ der Dropdown Animation und die Werte für die Einblendeverzögerung und Ausblendeverzögerung der Dropdowns anzupassen.

Verhalten

In diesem Reiter kannst du über die Option Menu beim Scrollen anheften? steuern, ob dein Flex Menu am oberen Bildschrim angeheftet werden soll, sobald der User auf der Seite herunterscrollt. Wähle die Gerätetypen aus, auf welchen das Verhalten gewünscht ist.

Beachte, dass du über die Option Sichtbarkeit in jedem Menupunkt gezielt steuern kannst, ob dieser bei einem angehefteten Menu angezeigt oder ausgeblendet werden soll.

Design

Im Reiter Design wartet eine besonders clevere Hilfe auf dich. Mit einem Klick auf den Button Designerkennung starten wird das Flex Menu Drop dein Template untersuchen und optisch passende Schriftarten, Farben und Schriftgrößen setzen.
Natürlich kannst du die gesetzten Einstellungen noch weiter optimieren und mit deinen Wunschwerten ersetzen.