Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- skoda-ep:skoda-wlc-2016:main_menu [19.02.2018 12:02]
Lukáš Čech
+++ skoda-ep:skoda-wlc-2016:main_menu [31.03.2021 08:05] (aktuální)
Lukáš Čech [Special fields]
@@ Řádek 11: / Řádek 11: @@
   - When you are ready, do not forget to press **Save Menu** button to make your changes visible!
-===== Mobile menu switch =====
-By default, the mobile menu is shown only once the window is smaller than 768px as seen here:
-{{ :skoda-ep:wlc_menu_mobile.png |}}
+===== Menu 2021 =====
-An administrator can define a different size for his site, so the mobile menu is shown even on larger screens. Look at the following example, where we have several items in the menu, this is a screen from a large desktop:
+{{:skoda-ep:skoda-wlc-2016:menu:2021-preview-mobile.png?direct&200|}}{{:skoda-ep:skoda-wlc-2016:menu:2021-preview.png?direct&200|}}
-{{ :skoda-ep:wlc_menu_before_wide.png |}}
+  - The new menu is limited to 2 lvls only
+  - Each menu item has a few info fields - preview image, icon and description. Hovering over menu items reveals additional information on the right side of the desktop menu.
+  - Mobile menu does not show either of these info fields
-When we view the site on a smaller screen, for example a tablet, the menu will not fit between the logos and jumps down as seen here:
+==== New menu activation ====
+Temporarily, before all markets release the new menu, it has to be enabled from the administration. Firstly, you must setup the menu so it contains all the data that are required - images, icons and descriptions of menu items
-{{ :skoda-ep:wlc_menu_before_tablet.png |}}
+Go to Admin panel -> Settings -> Primary Navigation
-To fix this issue, you can go to SKODA Options -> General and specify a different size when to break to mobile menu
+Check **Enable new menu** to use the new menu on frontend
-{{ :skoda-ep:wlc_menu_breakpoint_option.png |}}
+{{ :skoda-ep:skoda-wlc-2016:menu:wlc-menu-2021-settings.png?direct |}}
-When you specify this size, you will see a mobile menu when the screen is smaller than this size
+==== Special fields ====
-{{ :skoda-ep:wlc_menu_after_tablet.png |}}
+Menu items have special fields, that can be shown in the desktop menu
-==== How to determine the size to break the menu ====
+{{ :skoda-ep:skoda-wlc-2016:wlc-menu-2021-legend-2.png?direct |}}
-First you need to open a mobile view in your browser, navigate to your site
+{{ :skoda-ep:skoda-wlc-2016:menu:wlc-menu-2021-legend-1.png?direct |}}
-__Google Chrome__
+If you need more space for the icon (e.g. larger image), you can use the checkbox "Widen icon space"
-Press **CTRL+SHIFT+I** - when the console opens press **CTRL+SHIFT+M**.
+{{ :skoda-ep:skoda-wlc-2016:wlc-menu-2021-legend-3.png?direct |}}
-At the top, you will see a dropdown, which could say "Galaxy S5", "iPhone 5", "Responsive" or similiar - click the dropdown and select **"Responsive"**
-__Mozilla Firefox__
-Press **CTRL+SHIFT+M**
+WordPress has a default description field, that can be activated from the screen options at the top.
+**DO NOT USE** this field, as the field is very limited and will not work on frontend
+{{ :skoda-ep:skoda-wlc-2016:menu:wlc-menu-no-description-default.png?direct |}}
-{{:skoda-ep:chrome_responsive_inspector.png|}}{{:skoda-ep:firefox_responsive_inspector1.png}}
-Now you can play with the first numerical value (which is the width of the window) - in our case it shows **320** ... once you find the proper size where the menu is shown correctly you can use it in the options in administration
 ====== Manage footer menu ======