Working with new menu for UniTheme 1.4 from 13.03.2017

by alexbranding team

The list of innovations that offers a new type of menu (AB: Drop-down list with icons):

  • Possibility to load the icon to the main menu item (the first level).
  • The ability to assign any custom label to a menu item (stock, new, total sale, etc. at will) - it is possible to control the color of the label.
  • The ability to download custom content (banners, any html content) in the drop-down menu (control at the level of the parent menu item).
  • Possibility to optionally redefine the drop-down style for the second and third nesting levels (for menus items with many items on the third level).
  • New layout (optional) for the main page - with an open first level menu by default.

Creating new block

For those, who install a theme on a clean installation:

(First installation) and does not upgrade from older versions with needed import of layouts, a block with a new type of menu is already created in the layouts on the page (Default), the previous menu block (used up to UniTheme 1.4 version) is turned off.

For those, who make the upgrade process for UniTheme:

Disable the used block (Product Catalog) in layouts (Design > Layouts > Default) and add to the same section [+] new block > Create new block (Menu), choose template (АВ: Dropdown list with icons) and save. Open settings of new block and set wrapper (The drop-down list by clicking (AB)) and in the fiekd User-defined CSS-class add class (cat-menu-vertical).

Go to tab (Content) and choose needed menu.

Menu settings

Let's adjust the output of menu items in the proposed settings of this block. In the settings, specify the maximum number of elements of the second and third levels. Next, consider the settings for two different types of menu output (2-level) and (3-level) menu.

2-level menu

3-level menu

The three-level menu type is useful for output with a large number of elements of the third level, when it is difficult to visually show the structure in a two-level output. How to enable this type of menu, we will consider below.

Set the number of items displayed in the 2-level menu (if, for example, you have 10 third-level links in some menu item, and you set 5 in this field, then no more than five links will be displayed and the More [+] button will appear , The entire available list will be opened).

The last setting adjusts the number of elements in each column of the 3-level menu (drop-down list), you can arrange a nice output of the third level links, balancing their number in the columns.

How 3-level menu works

Editing menu items

Go to Design > Menus > Main menu and modify the menu item using the demo element "Electronics", as an example. To activate the new functionality, enable the checkbox (AB: Use extended menu with icons) and save. After you reopen the settings menu item "Electronics" you will have a new tab (AB: Extended menu settings).

Consider the settings of the new functionality in the tab (AB: Use extended menu with icons).

For the first level of the menu you can download the icon (maximum icon size, height 18px and width up to 30px). The size is not adjustable optionally and is adjusted for the correct display, which does not break the height of the menu items of the first level (adjustment of the individual size of the icons is possible by order on a fee basis).

Activation of the option "Activate 3-level menu (dropdown list)" is necessary in cases, when you have a large number of elements of the third level in the structure for a certain category.

In the field (Text) you can enter any HTML content for output in the body of the drop-down menu, it can be a graphic banner or links on brands pages, it all depends on your task and knowledge of HTML. To download a banner, prepare it in Adobe Photoshop (optimize the size) in advance and load it using the editor element (Images).

Option (Content position) adjusts the position of your banner (HTML content) relative to the right edge or the bottom of the menu.

The field (Label) allows to display a text marker (for example, New or Hit) and in next fields you can adjust the color setting of labels.

Examples of design drop-down menu items, as in our demo store:

- item Apparel

<p><img src="" alt="" style="margin: 0 0 -50px 0;z-index: 10;">

- item Electronics

<p><img src="" alt="" style="margin-bottom:-15px">

- item Sports & Outdoors

<p><img src="" alt="" style="margin-bottom: -50px;">

Experiment with the html content for the menu, getting the maximum level of convenience for the user

Video with settings for all menu items in the demo of our site


No posts found

New post