Back to Documentation list

[Magento 2] UB Mega Menu

Last Updated: May 16, 2018
Disclaimer:

Please always backup your Magento installation (files and database) before installing any of our extension so you can roll back in the event of issues. We recommend to install our extension in a testing environment before deploying it to your production environment. All Ubertheme extensions were tested in clean Magento installations without 3rd party extensions and we can’t guarantee for compatibility with 3rd extensions.

I. Installation Prerequisites

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

II. Download Packages

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

DOWNLOAD NOW

III. Manual Installation

NOTE: If your deploy:mode is production, you need to switch to Developer mode first (optional). Open your Terminal window, go to Magento 2 directory and run command below:

  • php -f bin/magento deploy:mode:set developer

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.

IV. UB Mega Menu Configuration

UB Mega Menu supports 5 styles:

  • style-default
  • style-1
  • style-2
  • style 3
  • Vertical menu

1. How to call UB Mega Menu

Before going into steps to create and configure menu items as per our demo, we learn about general setting of UB Mega Menu and 3 ways UB Mega Menu supports to create menu item.

1.1. General 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.

setting mega menu

UB Mega Menu Params

[show_number_product] Value 0 or 1. Default is 0.
[show_menu_title] On/Off Menu group title. Values: 0,1 Default is 0
[default_mega_col_width] The width of a Mega Column (px). Default is 200
[mega_col_margin] The margin value (margin-left + margin-right) of a Mega Column (px). Default is 20
[mega_content_visible_in] Example: desktop, tablet, mobile (ready from v1.0.1)
[start_level] The start level of menu item to show. Default is 0.
[end_level] The max level of menu item to show. Default is 10.
[addition_class] Addition CSS class for customization purpose. For instance, we use CSS class ub-mega-menu-vertical to show a UB Mega Menu vertical style.

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>

2. UB Mega Menu Configuration

This section provides detailed instruction to configure each style as per our demo site.

Important! You need to clear your cache in Magento after you create a new menu item or make any change following our configuration steps below.

When prompted, click the Cache Management link in the system message, and refresh the invalid cache. Or in your admin dashboard, you simply click System | Cache Management and clean cache.

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 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:

NOTE: UB Mega Menu supports 3 types of menu: Custom Link, CMS Page and Categories. You can define which menu type will be displayed on frontend.

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=”” /> /></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

NOTE:

In the Setting 2 step above, navigate to Custom Content | Click Show / Hide Editor button, and click Insert Widget button. Then follow the setting as per the Setting 3 screenshot.

Alternatively, in the Setting 2, navigate to the field Custom Content, click Show / Hide Editor button, and insert the sample snippet below which will call a sample Hot Products widget. Please note the sample code applies for a fresh Magento instance with sample data only.

<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 2NOTE: 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:
<div><img src=”{{media url=”wysiwyg/ubmegamenu/traning.jpg”}}” alt=”” /></div>
  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

NOTE: In the Setting 2 step, navigate to Custom Content | Click Show / Hide Editor button, and click Insert Widget button. Then follow setting as per the Setting 3 screenshot to load Hot Product widget. You can do the same to load the Best Seller widget.

Alternatively, in the Setting 2 screenshot above, in the field Custom Content, click Show / Hide Editor button, then insert the sample snippet below which will call both sample Hot Product and Best Products widgets. Please note the sample code applies for a fresh Magento instance with sample data only.

<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="" />
<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

NOTE:
Alternatively, in the Setting 2 screenshot above, in the field Custom Content, click Show / Hide Editor button, then insert the sample snippet below which will call a sample Best Products widget. Please note the sample code applies for a fresh Magento instance with sample data only.

<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:

2.5 Style 4 (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:

add widget

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

V. Import Categories into menu

Import categories into UB Mega Menu

Supposed that you have existing product categories, you can simply import all categories or a few specific categories into your menu. If you select to import all categories, UB Mega Menu (starting from version 1.0.3) allows to import categories and sub-categories recursively. That means, your whole category tree is fully imported and reserved.

NOTE: Only Categories with ‘Enable Category’ and ‘Include in Menu’ enabled are imported.

The import steps are simple as follows:

In the same Menu Group panel, go to Select | Manage Menu items. In the Menu item panel, click Import Categories, you’ll be directed to a pop up window. In the ‘Select Import Type’ field, specify the option you wish to import.

In case you import a few specific categories, simply fill in and select the name of categories you wish, then proceed import as per screenshot below.

Then (optional) assign the parent menu item to which the selected categories are imported and click ‘Import Categories’ button. Once done, your categories tree should be in place. See the sample below for reference:

Then you should go to your admin dashboard, click System | Cache Management and clean cache. Now open up menu on your frontend, you should see them in place:

EXTRA NOTE:
(New improvements in UB Mega Menu 1.0.4 and later)

During your development process, chances are that you might need to add or delete a huge list of menu items. UB Mega menu now allows you to remove (recursive) menu and sub-menu items easily. For instance, if you delete Gear menu item as shown in the screenshot below, all its sub-menu items will be removed too. You can delete each single sub-menu item though.

Or when you change the URL key or add a new sub-category, it will be automatically synced to the menu. And a menu item will no longer exist if its linked category is deleted.

Below you can find an example of a newly added sub-category:

  • In your Magento admin, navigate to Category | Add Subcategory and create a new Sub-category (eg. Shoes under Gear category), then click Save button.
  • Supposed that the Gear category menu item is already in place, then the new subcategory Shoes should be automatically synced to your Gear menu item.

V. Manual Un-Installation

If you want to have UB Mega Menu extension uninstalled, please follow steps below:

  • Step 1: [Important] Remove related widgets if they were created

Go to your Backend | Content | Widget, delete all created widgets with Widget Type UB Mega Menu

  • Step 2: Disable UB Instant Layered Navigation module and clean associated database tables

-- Open your terminal, go to your Magento2 folder <your magento install path> and run the following CLI commands:
php -f bin/magento maintenance:enable
php -f bin/magento deploy:mode:set developer
php -f bin/magento module:disable -c Ubertheme_UbMegaMenu
rm -rf app/code/Ubertheme/UbMegaMenu

-- Open your Mysql cpanel (eg. PHPMyAdmin), and run the following SQL:
NOTE: Make sure you replace with your own <table_prefix>:
DELETE FROM '<table_prefix>setup_module` WHERE `module`= 'Ubertheme_UbLayeredNavigation'
DELETE FROM `<table_prefix>setup_module` WHERE `module` = 'Ubertheme_UbMegaMenu';
DROP TABLE `<table_prefix>ubmegamenu_item`;
DROP TABLE `<table_prefix>ubmegamenu_group_store`;
DROP TABLE `<table_prefix>ubmegamenu_group`;

  • Step 3: Once done, run the following commands:

NOTE: You can still keep the developer mode if you continue development process. Otherwise, run the following commands to switch to production mode:
php bin/magento deploy:mode:set production
php bin/magento maintenance:disable