> ## 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. # Freely positioned product menu > How to build a product menu in WEBSALE V8s yourself from sections and loops, either with PM-DataComplete or with PM-DataLevel1 through PM-DataLevel10. This page describes the second of the two menu types. With the first type, a single tag generates the finished list menu. Here, you build the menu yourself from sections and loops and can position and design each navigation item individually. The flow is always the same. First, you preload the menu tree with a tag. Then, you output it with sections and loops in the way you need. > [!NOTE] > > Include the product menu in all shop templates that are to provide access to the product catalog. A template without this construct shows no catalog navigation. ## Step 1: Preload the menu tree Without a preloaded menu tree, all sections and loops remain empty. Two tags are available for this, which correspond to the tags of the automatically generated menu and have the same parameters. | Tag | Purpose | | - | - | | `WS-LoadProductMenu()` | loads a main menu with direct display up to a specific menu level | | `WS-LoadProductMenuIndex()` | loads a submenu structure for specific menu levels based on an index value | Via the parameters, you define, among other things, the start level and the end level. The meaning of the individual parameters is described for the automatically generated product menu and applies here unchanged. Guide: Automatically generated product menu Reference: WS-LoadProductMenu() > [!NOTE] > > If you set the fifth parameter to `yes` and thus use the MouseOver function, you need the WEBSALE JavaScript library from version 1.8.1 onwards. It must be included in the `` of every template that contains this product menu. ## Step 2: Choose an output method There are two methods for the output. They differ above all in the maintenance effort when the product catalog grows. | Method | Structure | Sensible when | | - | - | - | | `PM-DataComplete` | one section and one loop for all levels | new categories and levels are to appear without a template change | | `PM-DataLevel1` to `PM-DataLevel10` | one nested section per level | you want to control the nesting in the HTML yourself | Both methods reach a depth of up to ten levels, that is, the main menu and up to nine submenu levels. How many of them actually appear is decided by the parameters of the load tag. ### Understanding the status classes In all following examples, the same construct appears in the `class` attribute: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} class="level1{PM-IsOpened}_opened{/PM-IsOpened}{PM-IsClosed}_closed{/PM-IsClosed}{PM-IsSelected}_selected{/PM-IsSelected}" ``` The class name is composed of two parts. You write the fixed part, here `level1`, yourself. The suffix is provided by exactly one of the three sections, depending on which state the navigation item is currently in. The result is therefore `level1_opened`, `level1_closed`, or `level1_selected`. You then design exactly these classes in your styles file. ## Method 1: Output with PM-DataComplete This method is the lowest-maintenance one. One section and one loop are enough to output all existing and all future menu levels with all navigation items. When the catalog grows by a level, you do not have to touch the template, provided the parameter values of the load tag cover the new level. ![Pm Autobeispiel1 2](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1-2.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=98a02579bec4ea85a656efa820858f3c) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataComplete} {@PM-DataComplete} ~PM-Name~ {/@PM-DataComplete} {/PM-DataComplete} ``` The price for this is that all levels initially look the same. If they are to differ, query the current level within the loop with `PM-DataLevel(n)` and output your own markup per level. > [!WARNING] > > Do not confuse `PM-DataLevel(1)` with `PM-DataLevel1`. The notation with parentheses is a query inside the `PM-DataComplete` loop and checks which level the current navigation item is on. The notation without parentheses, on the other hand, is a separate section and belongs to method 2. ### Complete example The following example outputs four levels each with its own styling. The load tag initially displays only the topmost level directly. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenu(sidebar_mainmenu,1,1,show,no,0)~ {PM-DataComplete} {/PM-DataComplete} ``` The corresponding styles can be found further down in the "Styles for the examples" section. ![Pm Autobeispiel1variante 1](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1variante-1.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=3de34c765cc1567ec11e9b9b506c3d86) Reference: PM- (product menu) ## Method 2: Output with PM-DataLevel1 through PM-DataLevel10 With this method, you create a separate section for each level and nest them inside each other. The advantage is full control over the generated HTML, because the nesting of your sections matches the nesting of the menu. The disadvantage is the maintenance effort: if a category level is added, you have to add the corresponding section together with its loop. Each level consists of two nested markers. The outer section `{PM-DataLevelN}` checks whether there are any navigation items on this level at all. The inner loop `{@PM-DataLevelN}` then iterates over all existing and visible items of this level. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataLevel1} {@PM-DataLevel1} ~PM-Name~ {PM-DataLevel2} {@PM-DataLevel2} ~PM-Name~ {PM-DataLevel3} {@PM-DataLevel3} ~PM-Name~ {/@PM-DataLevel3} {/PM-DataLevel3} {/@PM-DataLevel2} {/PM-DataLevel2} {/@PM-DataLevel1} {/PM-DataLevel1} ``` ### Complete example The following example generates the same menu structure as the example for method 1, this time via four nested level sections. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenu(sidebar_mainmenu,1,1,show,no,0)~ ``` ## Styles for the examples The following styles apply to both complete examples because both generate the same class names. This is no coincidence, but the reason why you can switch output methods without touching your stylesheet. ```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} /* Settings for the surrounding DIV container */ #sidebar_mainmenu { width: 210px; font-size: 13px; } /* Settings for the heading */ #sidebar_mainmenu h1 { font-size: 13px; color: #2b569a; padding: 8px 0px 8px 0px; margin: 0px 0px 0px 0px; border-bottom: 1px dotted #2b569a; } /* Settings for all links within the surrounding DIV container */ #sidebar_mainmenu a { display: block; color: #2b569a; text-decoration: none; padding: 8px 0px 8px 5px; border-bottom: 1px solid #2b569a; } /* Settings for the display of the first level (main menu items) */ #sidebar_mainmenu a.level1_closed:hover, #sidebar_mainmenu a.level1_opened, #sidebar_mainmenu a.level1_selected { background: #2c579b; color: #fff; } /* Settings for the display of the second level (Level2) */ #sidebar_mainmenu a.level2_opened, #sidebar_mainmenu a.level2_closed, #sidebar_mainmenu a.level2_closed:hover, #sidebar_mainmenu a.level2_selected { background: #dddddd; border-bottom: 1px solid #fff; padding: 8px 0px 8px 20px; } #sidebar_mainmenu a.level2_opened, #sidebar_mainmenu a.level2_closed:hover, #sidebar_mainmenu a.level2_selected { background: #f7cd77; } /* Settings for the display of the third level (Level3) */ #sidebar_mainmenu a.level3_opened, #sidebar_mainmenu a.level3_closed, #sidebar_mainmenu a.level3_closed:hover, #sidebar_mainmenu a.level3_selected { background: #dddddd; border-bottom: 1px solid #cccccc; padding: 8px 0px 8px 30px; } #sidebar_mainmenu a.level3_opened, #sidebar_mainmenu a.level3_closed:hover, #sidebar_mainmenu a.level3_selected { color: #ff0000; } /* Settings for the display of the fourth level (Level4) */ #sidebar_mainmenu a.level4_opened, #sidebar_mainmenu a.level4_closed, #sidebar_mainmenu a.level4_closed:hover, #sidebar_mainmenu a.level4_selected { background: #efedee; border-bottom: 1px solid #bbc5cf; padding: 8px 0px 8px 45px; } #sidebar_mainmenu a.level4_opened, #sidebar_mainmenu a.level4_closed:hover, #sidebar_mainmenu a.level4_selected { background: #ffe5b2; } ``` ## Displaying two levels directly If the main categories and their direct subcategories are to be visible from the start, change only the third parameter of the load tag to `2`. Neither the source code nor the styles need to be changed, and this applies to both output methods alike. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenu(sidebar_mainmenu,1,2,show,no,0)~ ``` ## Submenu based on an index value If your main menu is horizontal at the top of the page, load the vertical submenu with `WS-LoadProductMenuIndex()`. The value `$_current_$` as the first parameter ensures that only the direct subcategories of the most recently selected category are used. Since the menu therefore already starts at the subcategories, the third parameter is `1`. The output itself is no different. You use the same sections and loops as above, only in a separate container. ![Submenu Current 1](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/submenu_current-1.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=61b079dd6360ebb6de55d15a813f4064) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~WS-LoadProductMenuIndex($_current_$,sidebar_submenu,1,show,no,0)~ ``` > [!WARNING] > > The level counting in this menu starts at 1 again. `PM-DataLevel1` here therefore does not designate the main categories, but the first category level displayed in the submenu. Assign the styles accordingly under a separate container ID so that they do not overlap with those of the main menu. Reference: WS-LoadProductMenuIndex() ## Using category information in the product menu Within the product menu, CAT tags are not allowed. A construction like the following therefore does not work: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataLevel1} {@PM-DataLevel1} {/@PM-DataLevel1} {/PM-DataLevel1} ``` This applies to every category information that you want to output in the product menu. Use the corresponding PM tags instead. These work in all loops of the product menu, that is, both in `@PM-DataComplete` and in `@PM-DataLevel1` to `@PM-DataLevel10`. ![20180606 Kat Info In Produktmenu](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/20180606_kat_info_in_produktmenu.png?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=8caae73a53e707b8d98583059cc3b1c8) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PM-DataLevel1} {@PM-DataLevel1} ~PM-Name~ ~PM-Name~ {/@PM-DataLevel1} {/PM-DataLevel1} ``` Reference: PM-AdvNavImg * Reference: PM-Descr * Reference: PM-FreeField1…20 * Reference: PM-OverviewImg ## Further design examples Materials: Materials for product menus ## Related topics - [Number of products per page](https://dokumentation.websale.de/en/v8s/kategorien/anzahl-der-produkte-pro-seite.md) - [Automatically generated product menu](https://dokumentation.websale.de/en/v8s/navigation/automatisch-generiertes-produktmenue.md) - [Subcategories of a category](https://dokumentation.websale.de/en/v8s/kategorien/unterkategorien-einer-kategorie.md) - [Styles for catalog and products](https://dokumentation.websale.de/en/v8s/referenz/styles/katalog-und-produkte.md) - [Navigation](https://dokumentation.websale.de/en/v8s/navigation.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.