> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # Materialien Produktmenüs > Zwei vollständige Gestaltungsbeispiele für frei positionierte Produktmenüs mit Flyout, einmal waagerecht und einmal senkrecht, jeweils mit Template-Quellcode und Stylesheet. Ein frei positioniertes Produktmenü bauen Sie aus Bereichen und Schleifen selbst auf. Diese Seite zeigt zwei vollständige Beispiele dafür, die über eine einfache Liste hinausgehen: ein Menü mit Flyout, in dem die Unterkategorien als Raster erscheinen und Platz für Bilder bleibt. | Beispiel | Hauptmenü | Flyout | Besonderheit | | - | - | - | - | | 1 | waagerecht am Seitenkopf | senkrecht darunter | Unterkategorien werden rechnerisch auf drei Spalten verteilt | | 2 | senkrecht in der Seitenleiste | waagerecht daneben | im Flyout erscheinen zusätzlich Produkte der Hauptkategorie | 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ü](https://dokumentation.websale.de/v8s/navigation/frei-positioniertes-produktmenue.md) · Referenz: [PM- (Produktmenü)](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md) ## 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 im `head`-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](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) · Referenz: [WS-LoadProductMenu()](https://dokumentation.websale.de/v8s/navigation/frei-positioniertes-produktmenue.md#schritt-1-menubaum-vorladen) ## 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. ![Pm Ep Beispiel1](https://mintcdn.com/websaleag-44ee7ea6/so3Yzq5sY0p_nwzU/images/pm_ep_beispiel1.png?fit=max\&auto=format\&n=so3Yzq5sY0p_nwzU\&q=85\&s=f53463911a38f3517e47382f80ee15ef) ### 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. | Schritt | Was passiert | | - | - | | `~DC-Int1_set($PM-NumberOfDirectVisibleEntries$)~` | Anzahl der Unterkategorien dieses Hauptnavigationspunktes | | `~DC-Int1_div(3)~` | geteilt durch die gewünschte Spaltenzahl, ergibt die Zeilen je Spalte | | `~DC-Int2_mod(3)~` | prüft, ob bei der Division ein Rest bleibt | | `{!DC-Int2(0)}~DC-Int1_inc~{/!DC-Int2(0)}` | bleibt ein Rest, bekommt jede Spalte eine Zeile mehr | 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. > [!WARNING] > > Weil erst aufgerundet und dann gezählt wird, füllt das Verfahren die vorderen Spalten voll und lässt die letzte gegebenenfalls kürzer. Bei vier Unterkategorien und drei Spalten entstehen deshalb zwei Spalten mit zwei Einträgen und keine dritte. Das ist gewollt, sieht bei sehr wenigen Unterkategorien aber unausgewogen aus. ### Der Quellcode für das Template > [accordion] Waagerechtes Produktmenü mit Flyout > > ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} > > ~WS-LoadProductMenu(horizontal,1,3,hide,no,0)~ > > > ~DC-Counter1_reset~ > > ``` ### Das Stylesheet > [accordion] Stylesheet zum waagerechten Produktmenü > > ```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} > /*#####################################################*/ > /* Definitionen für die Darstellung von PM-DataLevel1 */ > /*#####################################################*/ > .pm-data_level1 { > margin: 0px 0px 0px 0px; > } > .pm-data_level1 li { > float: left; > position: relative; > } > .pm-data_level1 li a { > color: #FFF; > padding: 10px 20px 8px; > text-decoration: none; > text-transform: uppercase; > font-size: 13px; > } > > /*###########################################################################*/ > /* Definitionen für den DIV-Container, in dem PM-DataLevel2 dargestellt wird */ > /*###########################################################################*/ > #pm-data_topnav_flyout_1, > #pm-data_topnav_flyout_2, > #pm-data_topnav_flyout_3, > #pm-data_topnav_flyout_4, > #pm-data_topnav_flyout_5 { > z-index: 100; > position: absolute; > width: 798px; > padding-top: 20px; > padding-bottom: 20px; > left: 0px; > } > > /*####################################################*/ > /* Definitionen für die Darstellung von PM-DataLevel2 */ > /*####################################################*/ > .pm-data-level2 { > float: left; > } > .pm-data-level2 a { > margin: 0px !important; > padding: 0px 20px 8px 20px !important; > } > .pm-data-level2 a:hover { > text-decoration: underline; > } > #pm-data_topnav_flyout_1 img, > #pm-data_topnav_flyout_2 img, > #pm-data_topnav_flyout_3 img, > #pm-data_topnav_flyout_4 img, > #pm-data_topnav_flyout_5 img { > margin-top: 5px; > } > > /*###############################################################*/ > /* Erster Hauptnavigationspunkt und dessen Unterpunkte auf Ebene 2 */ > /*###############################################################*/ > .pm-data_level1_1 .pm-data-level2 { > background: #983E3E; > } > .pm-data_level1_1 a, > .pm-data_level1_1 li a:hover { > background: #983E3E; > display: block; > } > #pm-data_topnav_flyout_1 { > background: #983E3E; > } > > /*################################################################*/ > /* Zweiter Hauptnavigationspunkt und dessen Unterpunkte auf Ebene 2 */ > /*################################################################*/ > .pm-data_level1_2 a, > .pm-data_level1_2 li a:hover { > background: #BF7BAE; > display: block; > } > #pm-data_topnav_flyout_2 { > background: #BF7BAE; > left: -148px; /* bündig zum ersten Navigationspunkt schieben */ > } > > /*###############################################################*/ > /* Dritter Hauptnavigationspunkt und dessen Unterpunkte auf Ebene 2 */ > /*###############################################################*/ > .pm-data_level1_3 a, > .pm-data_level1_3 li a:hover { > background: #9FC3E5; > display: block; > } > #pm-data_topnav_flyout_3 { > background: #9FC3E5; > left: -247px; /* bündig zum ersten Navigationspunkt schieben */ > } > > /*###############################################################*/ > /* Vierter Hauptnavigationspunkt und dessen Unterpunkte auf Ebene 2 */ > /*###############################################################*/ > .pm-data_level1_4 a, > .pm-data_level1_4 li a:hover { > background: #FC773D; > display: block; > } > #pm-data_topnav_flyout_4 { > background: #FC773D; > left: -429px; /* bündig zum ersten Navigationspunkt schieben */ > } > > /*###############################################################*/ > /* Fünfter Hauptnavigationspunkt und dessen Unterpunkte auf Ebene 2 */ > /*###############################################################*/ > .pm-data_level1_5 a, > .pm-data_level1_5 li a:hover { > background: #41A838; > display: block; > } > #pm-data_topnav_flyout_5 { > background: #41A838; > left: -594px; /* bündig zum ersten Navigationspunkt schieben */ > } > > /*#########################################################################*/ > /* Definitionen der separaten rechten Spalte für Grafiken mit Verlinkungen */ > /*#########################################################################*/ > .rechte_spalte { > float: right; > border-left: 1px dotted #fff; > } > .rechte_spalte a { > padding: 0px 20px 0px 20px !important; > } > ``` > [!WARNING] > > Das Stylesheet ist auf **genau fünf Hauptnavigationspunkte** zugeschnitten. Jeder hat seine eigene Farbe und einen von Hand ausgemessenen `left`-Wert, der sein Flyout linksbündig zur Seite schiebt. Hat Ihr Katalog eine sechste Hauptkategorie, bleibt deren Flyout ohne Hintergrund und an der falschen Stelle stehen. > > Ergänzen Sie für jede weitere Hauptkategorie einen Block `pm-data_level1_6` samt `#pm-data_topnav_flyout_6`. Die `left`-Werte hängen von der Textbreite Ihrer Kategorienamen ab und müssen neu ausgemessen werden. Der Wert `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 Parameter `DC-FP2` und `DC-FP3`. ![Pm Ep Beispiel2n3](https://mintcdn.com/websaleag-44ee7ea6/so3Yzq5sY0p_nwzU/images/pm_ep_beispiel2n3.jpg?fit=max\&auto=format\&n=so3Yzq5sY0p_nwzU\&q=85\&s=552fce450b91c5d2e36031df1a06d880) ### Wie das Aufklappen funktioniert Das Flyout und das aufgeklappte Untermenü sind zwei verschiedene Dinge, die beide aus derselben Schleife kommen. | Teil | Wodurch gesteuert | | - | - | | Flyout rechts daneben | jQuery über `onMouseOver` und `onMouseOut` | | aufgeklapptes Untermenü im Hauptmenü | `DC-FP2` beziehungsweise `DC-FP3` mit dem Wert `show` | 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 > [accordion] Senkrechtes Produktmenü mit Flyout > > ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} >

Senkrechtes Produktmenü mit waagerechtem Flyout

> > ~WS-LoadProductMenu(sidebar_navi,1,2,show,no,0)~ > >
> >
> ``` `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 > [accordion] Stylesheet zum senkrechten Produktmenü > > ```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} > /*######################################################*/ > /* Definitionen für den DIV-Container des Sidebar-Menüs */ > /*######################################################*/ > .ws_menu { > width: 200px; > } > > /*##############################################################*/ > /* Definitionen für die Darstellung von Ebene 1 im Sidebar-Menü */ > /*##############################################################*/ > .level1 { > list-style: none; > margin: 0px 0px 0px 0px; > padding: 0px; > border-bottom: 1px solid #ddd; > } > .level1 li { > position: relative; > } > .level1 a, > .level1 a:link, > .level1 a:visited, > .level1 a:active, > .level1 a.opened, > .level1 a.selected { > display: block; > color: #003366; > font-size: 12px; > border-top: 1px solid #ddd; > padding: 5px 0px 6px 23px; > text-decoration: none; > font-weight: normal; > margin: 0px 0px 0px 0px; > } > .level1 a.opened, > .level1 a.selected { > color: #00adef; > } > .level1 a:hover, > .level1 .ws_flyout:hover a.level1_link { > background: #666666; > color: #00adef; > margin: 0px 0px 0px 0px; > } > > /*##############################################################*/ > /* Definitionen für die Darstellung von Ebene 2 im Sidebar-Menü */ > /*##############################################################*/ > .level2 { > border-top: 1px solid #ddd; > } > .level2 a, > .level2 a:link, > .level2 a:visited, > .level2 a:active, > .level2 a.opened, > .level2 a.selected { > display: block; > color: #003366; > font-size: 12px; > padding: 5px 0px 6px 33px; > text-decoration: none; > font-weight: normal; > margin: 0px 0px 0px 0px; > } > > /*##################################################################*/ > /* Definitionen für die Darstellung von Ebene 2 im Flyout-Container */ > /*##################################################################*/ > .level2_flyout { > list-style-type: none; > padding: 3px 0px 0px 0px; > margin: 0px 0px 0px 20px; > width: 225px; > float: left; > border-bottom: 1px solid #ddd; > } > .level2_flyout a, > .level2_flyout a:link, > .level2_flyout a:visited, > .level2_flyout a:active, > .level2_flyout a:hover, > .level2_flyout a.selected { > display: block; > padding: 5px 0px 6px 25px; > text-decoration: none; > font-size: 12px; > color: #fff; > } > > /*##############################################################*/ > /* Definitionen für die Darstellung von Ebene 3 im Sidebar-Menü */ > /*##############################################################*/ > .level3 { > border-top: 1px solid #ddd; > } > .level3 a, > .level3 a:link, > .level3 a:visited, > .level3 a:active, > .level3 a.opened, > .level3 a.selected { > color: #003366; > font-size: 12px; > padding: 5px 0px 6px 43px; > text-decoration: none; > font-weight: normal; > margin: 0px 0px 0px 0px; > } > > /*#######################################*/ > /* Definitionen für den Flyout-Container */ > /*#######################################*/ > .ws_topnav_flyout { > position: absolute; > top: 1px; > left: 190px; > width: 740px; > padding: 10px 0px 10px 0px; > z-index: 999; > background: #666666; > } > > /*####################################################################################*/ > /* Definitionen für die Grafiken mit Verlinkungen (Produktdarstellung) im Flyout-Menü */ > /*####################################################################################*/ > .ws_topnav_flyout_offer { > float: right; > margin: 0px 28px 0px 0px; > width: 387px; > } > .ws_topnav_flyout_offer h3 { > color: #fff; > font-size: 12px; > font-weight: normal; > margin: 0px 0px 6px 9px; > } > a.ws_topnav_flyout_offer_images, > a.ws_topnav_flyout_offer_images:link, > a.ws_topnav_flyout_offer_images:visited, > a.ws_topnav_flyout_offer_images:active, > a.ws_topnav_flyout_offer_images:hover { > float: left; > margin: 0px 0px 0px 10px; > background: #fff; > padding: 0px 0px 0px 0px; > } > ``` > [!WARNING] > > Die Namen passen nicht zusammen, das Flyout bleibt deshalb ohne Position, ohne Breite und ohne Hintergrund stehen. Hier auf die Namen des Quellcodes vereinheitlicht. Die Werte `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](https://dokumentation.websale.de/v8s/referenz/tags/dc/rechnen.md#die-tags-im-uberblick) · [DC-FP1…9](https://dokumentation.websale.de/v8s/referenz/tags/dc/parameter.md) · [Cat-AdvData()](https://dokumentation.websale.de/v8s/referenz/tags/cat/navigation-und-kategoriebaum.md#cat-advdata) ## Related topics - [Frei positioniertes Produktmenü](https://dokumentation.websale.de/v8s/navigation/frei-positioniertes-produktmenue.md) - [PM- (Produktmenü)](https://dokumentation.websale.de/v8s/referenz/tags/pm-produktmenue.md) - [Materialien Parameterentfernung](https://dokumentation.websale.de/v8s/materialien/materialien-parameterentfernung.md) - [Materialien Direktbestellung](https://dokumentation.websale.de/v8s/materialien/materialien-direktbestellung.md) - [Materialien Produktbewertung](https://dokumentation.websale.de/v8s/materialien/materialien-produktbewertung.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.