Wie Produktmenüs grundsätzlich aufgebaut sind, welche Ebenen-Tags es gibt und was die Status-Klassen bedeuten, steht auf der Anleitungsseite. Diese Seite setzt das voraus.
Wegweiser: Frei positioniertes Produktmenü · Referenz: PM- (Produktmenü)
Was beide Beispiele voraussetzen
Beide Menüs blenden ihr Flyout mit jQuery ein und aus. jQuery kommt im Vorlagenshop aus der WEBSALE JavaScript-Bibliothek ab Version 1.8.1, die imhead-Bereich jedes Templates stehen muss, das eines dieser Menüs enthält.
Der fünfte Parameter von WS-LoadProductMenu() steht in beiden Beispielen auf no. Die eingebaute MouseOver-Funktion des Shopsystems wird hier also nicht verwendet, das Ein- und Ausblenden erledigen die Beispiele selbst. Die Bibliothek brauchen Sie trotzdem, aber nur wegen jQuery.
Wenn Ihr Shop jQuery bereits auf anderem Weg einbindet, brauchen Sie die Bibliothek nicht. Für neue Shops ist ohnehin der Weg über die WS-Module vorgesehen.
Materialien: WEBSALE JavaScript-Bibliothek · Referenz: WS-LoadProductMenu()
Beispiel 1: Waagerechtes Hauptmenü mit senkrechtem Flyout
Das Hauptmenü steht waagerecht am Seitenkopf. Fährt der Besucher über einen Hauptnavigationspunkt, klappt darunter ein Kasten auf, in dem die Unterkategorien der zweiten und dritten Ebene stehen. Diese Unterkategorien verteilt das Template rechnerisch auf drei gleich hohe Spalten, sodass der Kasten wie ein Raster wirkt. Rechts daneben ist Platz für eine weitere Spalte mit verlinkten Bildern.
Wie die Spaltenverteilung rechnet
Der Kern des Beispiels sind vier Zeilen vor der Schleife über die zweite Ebene. Sie bestimmen, nach wie vielen Einträgen eine neue Spalte beginnt.
In der Schleife zählt
DC-Int2 dann die Einträge mit. Sobald der Zähler den berechneten Wert überschreitet, schließt das Template den Spalten-Container und öffnet den nächsten.
Die Spaltenzahl steht an drei Stellen im Quellcode: zweimal als Argument von _div und _mod, einmal im Stylesheet über die Breite von pm-data-level2. Wollen Sie statt drei Spalten vier, ändern Sie alle drei Stellen.
Der Quellcode für das Template
Das Stylesheet
798px in der Flyout-Breite ist die Inhaltsbreite des Beispielshops. Passen Sie ihn an Ihr Layout an, sonst steht der Kasten über oder unter der Seitenbreite.
Beispiel 2: Senkrechtes Hauptmenü mit waagerechtem Flyout
Das Hauptmenü steht senkrecht in der Seitenleiste. Fährt der Besucher über einen Hauptnavigationspunkt, erscheint rechts daneben ein breiter Kasten mit den Unterkategorien der zweiten Ebene und zusätzlich mit Produktbildern aus dieser Hauptkategorie. Klickt der Besucher dann auf eine Unterkategorie, bleibt sie zusätzlich im senkrechten Menü aufgeklappt, mitsamt der dritten Ebene. Dafür sorgen die freien ParameterDC-FP2 und DC-FP3.
Wie das Aufklappen funktioniert
Das Flyout und das aufgeklappte Untermenü sind zwei verschiedene Dinge, die beide aus derselben Schleife kommen.
Der Trick dabei: Das Template durchläuft die zweite Ebene einmal probeweise und setzt
DC-FP2 auf show, sobald einer der Unterpunkte den Zustand geöffnet oder ausgewählt hat. Erst danach entscheidet {DC-FP2(show)}, ob der Block überhaupt ausgegeben wird. Für die dritte Ebene wiederholt sich das mit DC-FP3.
Der Quellcode für das Template
Cat-AdvData() öffnet eine Produktliste zu einem Kategorieindex und ist nicht dasselbe wie die CAT-Tags, die die gerade aktive Kategorie auslesen. Letztere sind innerhalb des Produktmenüs nicht zulässig, Cat-AdvData() dagegen bekommt den Index ausdrücklich als Parameter und wertet ihn als Tag im Tag aus. Deshalb funktioniert $DC-FP1$ an dieser Stelle.
Die Zahl im zweiten Parameter von Cat-AdvData() ist die Höchstzahl der ausgegebenen Produkte. Ohne Stern erhalten Sie die ersten Produkte in Listenreihenfolge, mit Stern eine zufällige Auswahl. {Cat-AdvData($DC-FP1$,*3)} zeigt also drei wechselnde Produkte statt immer derselben drei.
Das Stylesheet
190px für den linken Abstand und 740px für die Breite des Flyouts gehören zusammen mit der Menübreite von 200px. Ändern Sie die Menübreite, ziehen Sie den linken Abstand mit.
Das Ein- und Ausblenden über onMouseOver und onMouseOut stammt aus der Entstehungszeit der Beispiele. Für einen neuen Shop erreichen Sie dasselbe ohne JavaScript über .ws_flyout:hover .ws_topnav_flyout { display: block; }. Das Beispiel nutzt diese Technik bereits für die Hervorhebung des Hauptnavigationspunktes, siehe die Regel .level1 .ws_flyout:hover a.level1_link.
Referenz: DC-Counter1…3 · DC-FP1…9 · Cat-AdvData()