Magento 2 UB Mega Menu

UB Mega Menu is native with Magento 2.x. Please make sure your system meets the Magento 2 System requirements: here.

Navigate to your profile at Ubertheme to download UB Mega Menu extension:

DOWNLOAD NOW

Step 1. Unzip the download package somewhere on your local PC. Then copy the ‘app’ directory and paste into root directory of your Magento 2

Step 2. Open your terminal and go to the Magento directory. In this directory, run the following commands:

• php -f bin/magento module:enable -c Ubertheme_UbMegaMenu
• php -f bin/magento setup:upgrade

Step 3 (optional): Run code compilation using command below. This helps to improve your site performance after installation:

• php -f bin/magento setup:di:compile

Once you finish the last command to clean cache, you have UB Mega Menu installed and ready for your use.

Our Magento 2 Mega Menu supports 6 styles:

• style-default
• style-1
• style-2
• style 3
• style 4 (Full Width)
• Vertical menu

1. How to call UB Mega Menu

Before going into steps to create and configure menu items as per our demo, let’s learn about general settings of our Magento 2 Mega Menu and 3 ways it supports to create menu item.

1.1. General Magento 2 mega menu settings

In your Magento backend, go to Content | (UB Mega menu) Settings, you can see the Basic settings of UB Mega Menu. We can leave this configuration as default for now.

UB Mega Menu Params

1.2 Three options to create UB Mega Menu menu item

1.2.1 -- Settings and show a UB Mega Menu via Widgets management module (Content/Widgets)

1.2.2 -- call block

Shortcode to show in CMS Blocks

{{block class="Ubertheme\UbMegaMenu\Block\Menu" name="ub.mega.menu1" menu_key="YOUR_MENU_KEY_HERE"}}

1.2.3 -- Call in XML

Shortcode to call in XML:

<referenceContainer name="page.top"><block class="Ubertheme\UbMegaMenu\Block\Menu" name="ub.megamenu.leftmenu1" ifconfig="ubmegamenu/general/enable">    <arguments>      <argument name="menu_key" xsi:type="string">top-menu</argument>      <argument name="addition_class" xsi:type="string"></argument>    </arguments></block></referenceContainer>

This section provides detailed instruction to configure each style of Magento 2 mega menu as per our demo site.

2.1 Default style

Step 1 -- Create menu group
In the Magento backend, navigate to Content | (UB Mega Menu) Manage Menu, then click Add New Menu. In the popup, you can configure as per this screenshot (Make sure you insert menu key as main-menu). Once done, you should see the new menu group visible as illustration (3) in the following screenshort:

Step 2 -- Create Magento 2 mega menu item
Supposed that you have some sample products in place already, now we start to create menu items for the mega menu. In the same Menu Group panel, go to Select | Manage Menu Items:

Step 2.1 -- Create Service and its sub-menu items:

NOTE: When you create UB Mega Menu for the first time, you will not see any menu item in place yet. The above-mentioned screenshot just gives you an illustration about the menu hierarchy after you create those menu items.

Click Add New Menu Item button to create each of menu item, and follow configuration below:

1. Service: Configuration steps -- menu setting 1 > menu setting 2
   NOTE: when you create multiple columns, you need to set the width of each column in px. For instance:
   col1=200
col2=200
col3=200
col4=600
   And wrapper of the column width (px), for instance: 600
   Make sure in the Setting 2 step, you insert custom CSS class style-default
2. Gear: Configuration steps -- menu setting 1 > menu setting 2
   NOTE: When you check the setting 2, in the field Description click Show / Hide Editor button, then click Insert Image button and upload the image at your choice. Once you upload image (eg. clothing.jpg) successfully, the image param should follow this format:
   <div><img src=”{{media url=”wysiwyg/ubmegamenu/clothing.jpg”}}” alt=”Magento 2 Mega Menu” /> /></div>
3. Bags: Configuration steps -- menu setting 1 > menu setting 2
4. Apply similar setting of Bags for other sub-menu items of Gear

Step 2.2 -- Create Men, Women and their sub-menu items
Follow similar steps and settings as per Gear menu and its sub-menu items.
Step 2.3 -- Create Hot Product
Product’s Configuration steps -- Setting 1 > Setting 2 > Setting 3

<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Hot Products" show_pager="0" products_count="3" template="product/widget/content/grid.phtml" conditions_encoded="a:1:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]]"}}</p>

2.2 Style-1

Step 1 -- Create Training and its sub-menu items:

Click Add New Menu Item button to create each of menu item, and follow configuration below:

1. Training: Configuration steps -- menu setting 1 > menu setting 2
   NOTE: when you create multiple columns, you need to set the width of each column in px. For instance:
   col1=400
col2=300
   And wrapper of the column width (px), for instance: 700
   Make sure in the Setting 2 step, you insert custom CSS class style-1
2. Column01: Configuration steps -- menu setting 1 > menu setting 2
   NOTE: when you create multiple columns, you need to set the width of each column in px. For instance:
   col1=200
col2=200
col3=400
   And wrapper of the column width (px), for instance: 400
3. Gear: Configuration steps -- menu setting 1 > menu setting 2
   NOTE: When you check the setting 2, in the field Description click Show / Hide Editor button, then click Insert Image button and upload the image at your choice. Once you upload image (eg. traning.jpg) successfully, the image param should follow this format:

1. Bags: Configuration steps -- menu setting 1 > menu setting 2
2. Apply similar setting of Woman bags for other sub-menu items of Clothing

Step 2.2 -- Create Men and their sub-menu items
Follow similar steps and settings as per Gear menu and its sub-menu items.

Step 2.3 -- Insert Free Shiping Banner into Mega menu
Create Free Shiping item (by clicking Add New Menu Item) as a sub-menu of Training > Column01 following configuration steps: Setting 1 > Setting 2

Step 2.4 -- Create Hot Product and Best Seller menu items
Column02: Configuration steps -- Setting 1 > Setting 2 > Setting 3

<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Best Product" show_pager="0" products_count="2" template="product/widget/content/grid.phtml" conditions_encoded="a:2:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]s:4:`1--1`;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Product`;s:9:`attribute`;s:12:`category_ids`;s:8:`operator`;s:2:`==`;s:5:`value`;s:1:`8`;]]"}}</p>
<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Hot Product" show_pager="0" products_count="1" template="product/widget/content/grid.phtml" conditions_encoded="a:2:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]s:4:`1--1`;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Product`;s:9:`attribute`;s:12:`category_ids`;s:8:`operator`;s:2:`==`;s:5:`value`;s:1:`4`;]]"}}</p>

2.3 Style-2

Step 1 -- Create Clothing and its sub-menu items

We do similar steps as per Style-1 to create menu items.

Click Add New Menu Item button to create each of menu item, and follow configuration below:

1. Men: Configuration steps -- Setting 1 > Setting 2
   NOTE: Make sure you add CSS class style-2 in the setting #2 step.
   And wrapper of the column width (px), for instance: 700
2. Column01: Configuration steps -- Setting 1 > Setting 2
   NOTE:
   -- when you create multiple columns, you need to set the width of each column in px. For instance:col1=140
col2=140
col3=140
col4=280
   -- And wrapper of the column width (px), for instance: 700
   -- When you check the setting 2, in the field Description click Show / Hide Editor button, then click Insert Image button and upload the image at your choice. Once you upload image successfully, the image param should follow this format:

   <div class="full-banner"><img src="{{media url="wysiwyg/ubmegamenu/banner-01.jpg"}}" alt="Magento 2 mega menu" />
   <h3>New arrivals</h3>
   <h4>Discover the women collections</h4>
   </div>
   

3. Women: Configuration steps -- Setting 1 > Setting 2
4. What’s New: Configuration steps -- Setting 1 > Setting 2
5. Apply similar settings of What’s New in for other sub-menu items of

Tops and Shorts menu items follow the same steps.

Step 2 -- Create Product’s menu item

This item is actually a Magento 2 widget (Catalog New Product List) being loaded into mega menu. Click Add New Menu Item again, to create Best Product item and follow these configuration steps: Setting 1 > Setting 2 > Setting 3

<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Best Products" show_pager="0" products_count="2" template="product/widget/content/grid.phtml" conditions_encoded="a:2:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]s:4:`1--1`;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Product`;s:9:`attribute`;s:12:`category_ids`;s:8:`operator`;s:2:`==`;s:5:`value`;s:1:`3`;]]"}}</p>

2.4 Style 3 (one-column)

We do similar steps as per Style-1 to create menu items.

Click Add New Menu Item button to create each of menu item, and follow configuration below:

• Women: Configuration steps -- Setting 1 > Setting 2
• Men: Configuration steps -- Setting 1 > Setting 2
• Bottoms: Configuration steps -- Setting 1 > Setting 2
• Video Download: Configuration steps -- Setting 1 > Setting 2
• Apply similar settings for the rest of sub-menu items

2.5 Style 4 (Full Width)

Step 1 -- Create Sale and its sub-menu items
We do similar steps as per Style-1 to create menu items.

Click Add New Menu Item button to create each of menu item, and follow configuration below:

• Sale: Configuration steps -- Setting 1 > Setting 2
  NOTE:

  Full width mega menu is a new feature introduced in UB Mega Menu ver 1.1.2. You will see a new setting ‘Set Base Width’ with two values:

  • Fixed Width (px)
  • Dynamic Width (%)

  In order to set the mega menu to full width, you need to set the Base Width as ‘Dynamic Width (%)’ first. Then, you specify the individual column widths:

  • If you have 1 column in your mega menu, your column width equals to 100%
  • If you have 5 columns in your mega menu and set the ‘Grid Column Submenu’ blank, each column width equals to 20%.
  • If you want to set column width individually, enter the percentage value for each respective column under the ‘Grid Column Submenu’ field. For instance:
    • col1=25
    • col2=25
    • col3=25
    • col4=25
    • col5=100

    With this configuration, your mega menu will end up with a Full Width mega menu where the first 4 columns will be located on the first row, and the fifth column on the second row with max 100% width.

• Gear: Configuration steps -- Setting 1 > Setting 2
• Bags: Configuration steps -- Setting 1 > Setting 2
• Bras & Tanks: Configuration steps -- Setting 1 > Setting 2
• Apply similar settings for the rest of sub-menu items

Step 2 -- Create What’s New menu item
Click Add New Menu Item again, to create What’s New item and follow these configuration steps: Setting 1 > Setting 2

<div class="intro-megamenu">
<div class="intro">Our Magento 2 mega menu is developed from the ground up. Simple yet powerful enough to create highly customisable Magento 2 mega menu, either horizontal or vertical for your store. With many goodies in place like Drag n Drop admin interface, flexible configuration options, you can show off your product categories and sub-categories in a multi-column drop down menu. You can promote items, banners and clips right in the Magento 2 Mega Menu, just a few clicks away.</div>
<div class="func-01"><img src="{{media url="wysiwyg/ubmegamenu/image03.jpg"}}" alt="Multiple Column Magento 2 Mega Menu" />
<p class="title">Multiple Column Magento 2 Mega Menu</p>
<p>Easier than ever to build professional multiple column layout to show off all of your categories and subcategories. Shoppers can see all of featured product options or navigate from pages to pages with ease.</p>
</div>
</div>

2.6 Style 5 (Vertical menu)

Some stores might need vertical menu, instead of the top main menu. It’s possible for UB Mega menu to create the sidebar one column menu (vertical).

Step 1: Create menu group with menu key ub-left-menu for vertical menu, then add menu item as you wish:

(If you are new to Magento, scroll back to section 2.1 Default Style to learn on steps to create menu group)

Step 2:
In your Magento admin, navigate to Content | Widget, then click Add Widget, and configure as follows:

Once done, simply add your own menu items the same way we do in the Top Menu above.