main-image-800x491_6

Mega Menu PRO

Getting Started

Overview

Drag & Drop Menu Builder

Our Magento 2 mega menu support amazing drag & drop features. That helps you to build rich content and professional menu within a few minutes.

Vertical menu & horizontal menu

With our magento 2 mega menu, you can choose to show as horizontal or vertical menu layout. Just need to add menu item in the backend then select menu type you want.

Responsive & optimized for Mobile menu

There are two mobile menu types supported including: Off canvas mega menu, Accordion Menu. You can choose one of them easily in the backend

Magento 2 Mega Menu Supports 7 Submenu Types

  • Anchor Text
  • Dynamic Category Listing
  • Product Listing
  • Product Grid
  • Child menu.
  • Default Category Listing
  • Content

Style your megamenu without editing css file

Our magento 2 mega menu extension allows you to style in design tab. Customizing menu styles is easy as pie: changing width, color, icon or even position.

Create as many menu as you want

There is no limit for user to create as many menu as you want. Users can find it very easy to set up new dynamic magento 2 navigation menu too.

Widget supported

Thanks to being supported with widgets. Admin can find it easy to place megamenu on any position of your site.

Multiple Animations Effects Supported

Show you menu attractively with the support of Animations Effects we bring you. Moreover, you can set times for each of them

Installation

To install Magento 2 Megamenu extension follow instructions bellow:

1. Back up your web directory and store database.

2. Download Mega Menu installation package

3. Upload content of the Mega Menu installation package to your store root folder via FTP/SFTP
install magento 2 megamenu

4. Connect to your store root directory with SSH

cd path_to_the_store_root_folder

Run 3 commands bellow:

php -f bin/magento setup:upgrade
php -f bin/magento setup:static-content:deploy
php -f bin/magento setup:di:compile

menu_console

5. Flush store cache, log out from the backend and log in again

Execute the following command

php -f bin/magento cache:clean

menu_clear_cache

Or go to Back-end > System > Cache Management. Click the following buttons to completely clear the store cache:

  1. Flush Mangento Cache
  2. Flush Cache Storage
  3. Flush Catalog Images Cache
  4. Flush Javascripts/CSS cache

menu_cache

Import Sample Data

1. Go to Back-end > Venustheme > Setup > Import

2. Select the sample data file

m2nu_sampledata

3. Refresh the cache under Back-end > System > Cache Management

Video Guide To Install Magento 2 Megamenu

Usage

How to create a menu

In this tutorial, I will show you how to create a menu in magento 2 easily with drag n drop features and visual interface.

Firstly, Go to Back-end > Venustheme > Mega Menu > Add New Menu

menu

There are two tabs: General Settings, Menu Editor

General Settings Tab

menu2

Name: Title of the menu, such as Top menu, Vertical menu,

Alias: You can display menus that have the same alias for different stores

Event: There are two options

  • Hover: Used to create Horizontal menu, Vertical Menu
  • Click: Used to create Tree menu, Accordion menu

Scroll to Fixed: Allow this menu fixed on the top page when scroll over menu position:
menu_sticky1

Additional Class: Add custom classes

Disable Dimensions: Enter the width(pixel) want to disable this menu. The menu will be remove when your screen width less than this value

Bootstrap 3 Media Query Breakpoints:

  • Large Devices, Wide Screens: 1200px
  • Medium Devices, Desktops: 992px
  • Small Devices, Tablets: 768px
  • Extra Small Devices, Phones: 480px
  • iPhone Retina: 320px

Desktop Template: Apply when screen width more than 768px. There are 3 template types:

  •  Horizontal Menu

menu-hozizal

  • Vertical Menu Left

menu-vertical-left

  • Vertical Menu Right

menu-vertical-right

Mobile template: There are two template types:

Off Canvas

mever-offcanvas

Accordion

menu-treemenu

Disable Item Blocks on mobile: Disable menu item blocks as Header Block, Left Block, Right Block, Footer Block.

Customer Groups: Select  customer group(s) can see this menu

Store View: Select store(s) that you want to show this menu

Status: You can enable or disable the menu

Menu Editor Tab

This tab allows manage menu items

 

How to add a menu using Widget?

Create a vertical menu in Back-end > Venustheme > Mega Menu > Add New Menu

We have 2 methods to add a menu widget in Magento2

I) Widget Instannce

Go to Back-end > Content > Widgets > Add Widget

Select the option Ves Megamenu and a theme that you want to show this menu

Complete the Layout Updates

a. In the Layout Updates section,set Display On to the category, product or page where you want the block to appear.

b. To complete the Layout Updates, do the following:

  • Select a page where you want the menu appear
  • Select the Block Reference to identify the place on the page where the menu will appear

Click Save and Continue Edit.

II) Insert into a CMS page

Go to Back-end > Content > Pages

Click on the page where you would like the menu to appear, open the Content section and click on the Insert Widget icon.

menuwidget

A new window will be opened, select the option Ves Megamenu. Then click the Insert Widget button.

megamenu2

The widget will be inserted. Click on the Save Page button in the Magento administrator area. After this you can check your page on the frontend to confirm the menu is showing properly.

How to add products in submenu

The menu extension supports Ves Megamenu Products widget, so you can add in Wysiwyg Editor to display a product list.

To add the product widget, please the following step by step as bellow:

Step1: Click the Insert Widget icon

products

Step2: Update widget options

Select Categories and 8 product sources:

  • Latest Products
  • New products
  • Special
  • Most Popular
  • Best Seller
  • Top Rated
  • Random
  • Featured

The widget supports 2 carousel:

Item Settings: Enable/Disable product elements

product_settings1

Step3: Refresh cache and check the widget in the frontend

products1

 

How to configure menu item

I will show you how to config magento 2 menu with our magento 2 megamenu extension. Please follow our tutorials step by step.

A menu item have 8 tabs:

  • General Information
  • Dropdown
  • Header
  • Left Block
  • Main Content
  • Right Block
  • Bottom Block
  • Design

Before configuring all item settings, we need to check a structure of each menu item

General Information

Name: Title of the menu item, such as Home, Women, Men, etc…

Link Type: There are 2 link types:

  • Custom Link: Enter your custom link, this field supports Magento 2 short code: {{store url=”contact”}} => http://domain.com/contact
  • Category Link: render link by specific category

Link Target: There are 4 options:

  • Load in a new window
  • Load in the same frame as it was clicked
  • Load in the parent frameset
  • Load in the full body of the window

Show Icon: Upload a icon for this item, then update icon position

Is Group: Set Yes to allow Sub-menu items show in  the same level of parent without hover on parent to show them.

group

Disable Dimesions: Enter the width(pixel) want to disable, menu will be hidden when screen width less than the field value

Bootstrap 3 Media Query Breakpoints:

  • Large Devices, Wide Screens: 1200px
  • Medium Devices, Desktops: 992px
  • Small Devices, Tablets: 768px
  • Extra Small Devices, Phones: 480px
  • iPhone Retina: 320px

Status: You can enable or disable this item

Dropdown

Width: Set width for menu item dropdown. Fx: 1000px, 100%

Animation In: Dropdown appearance effect. There are 9 groups and 44 effects

Animation Time: Set total time of effect. 

Alignment: There four alignment types for the menu content to appear

  • From left menu: menu dropdown content will appear from the left of menu bar to the right

  • From right menu: menu dropdown content will appear from the right of menu bar to the left

  • From left item: menu dropdown content will appear from the left of menu item

menu-itemleft1

  • From right item: menu dropdown content will appear from the right of menu item

menu-itemright1

Background Options: background color, background image, background repeat, background position x, background position y

menu-backgroundoptions

Inline CSS: Add custom code css for this item.

Header: Default width is 100%.

Left Block: Supports Wysiwyg editor, you can insert HTML code, Video(youtube, ,…), Magento widget,etc

Main Content: There are four content types

  • Child Menu Item: Display menu item in the menu editor section

  • Content: Supports Wysiwyg editor: insert HTML code, Video(youtube, vimeo,…), Magento widget

menuitem-content1

  • Dynamic Content Tab: Each item as a tab, the first tab is default active

  • Sub-Categories: Show all sub-categories by specific category

Right Block: Change block width. Fx: 100%, 400px. Supports Wysiwyg editor

Bottom Block: Default width is 100%. Supports Wysiwyg editor

Design: Customize the style of menu item: color, background color,…

How to change the default menu

In order to change magento 2 default menu, please follow our below tutorials step by step.

1. Create the file app/design/THEME_VENDOR/THEME/Ves_Megamenu/layout/default.xml

2. Add code bellow into the file content and change YOUR_MENU_ALIAS_HERE to a menu alias that you want to show

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="store.menu">
           <block class="Ves\Megamenu\Block\Menu" name="catalog.topnav" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
             <arguments>
                 <argument name="alias" xsi:type="string">YOUR_MENU_ALIAS_HERE</argument>
             </arguments> 
          </block>
       </referenceBlock>
 </body>
</page>

menu_customize

How to show parent menu and sub menus in the same level

In this tutorial, I will let you know how to show magento submenu and parent menu in the same level. You  only need to enable the field Is Group is Yes, and then both the menu and sub-menu items will be displayed in the same level

group1

show magento submenu

How to add label into menu items

In this tutorial, I will show you how to add menu label with ease. Firstly, Add all html code bellow in menu title:

New Label

<span class="cat-label cat-label-v1 pin-top">New</span>

menu-newlabel2

Hot Label

<span class="cat-label cat-label-v2">Hot!</span>

menu-hotlabel

Sale Label

<span class="cat-label cat-label-v2 pin-top">Hot!</span>

add-menu-label-magento-2

How to add menu link to category and sub categories?

Ves Megamenu extension support menu link type “Category“. So at here we can add manually menu items to link to category item which you want. However we dont need add all menu items to link to categories.

1, How to add menu item link to category?

  • Edit menu item which you want to link to category
  • Choose “Link type” = “Category”
  • Choose “Category” = “your category which you want to link to”
  • Click “Update” button
  • Click “Save” Button on top bar

add_menu_category

2, How to load sub categories in dropdown of a parent menu item?

If we have categories as this, how to load sub categories of parent cate “Women” in dropdown of menu item “Women”?

Categories

tree_categories

Config Megamenu As Steps:

  • Edit parent menu item which you want to load sub categories in dropdown (Women)
  • Edit  “Main Content” of parent menu item
  • Choose “Main Content Type” = “Sub-Categories”
  • Choose the “Parent Category” = parent category which you want to load all sub categories in dropdown (Women)

config_sub_categories

 

config_choose_parent_category

On frontend will show as this:

sub_categories_as_menu_items

Video Tutorials

Video Tutorials

Theme Integration

Ultimo

Create the file app/design/frontend/Infortis/ultimo/Ves_Megamenu/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceContainer name="store.menu">
      <block class="Ves\Megamenu\Block\Menu" name="catalog.topnav.menu" as="catalog.topnav.menu" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
        <arguments>
          <argument name="alias" xsi:type="string">menu-top</argument>
        </arguments> 
      </block>
    </referenceContainer>
  </body>
</page>

Download the file app/design/frontend/Infortis/ultimo/Ves_Megamenu/web/css/styles.css at here then update for your site

Finally, run the command

php -f bin/magento setup:static-content:deploy

FAQ

How to change default horizontal menu on header?

After setup the module on your site, you should create the menu profile which have Alias = “top-menu“, it will auto show on Header area of your site.

To change the default menu top to load other menu alias, ex: menu-top-default

You should edit the file “/app/code/Ves/Megamenu/view/frontend/layout/default.xml” or copy the file into your template folder “app/design/frontend/Theme Vendor/Theme Name/Ves_Megamenu/layout/“. Then change the code:

<argument name=”alias” xsi:type=”string”>top-menu</argument>

To:

<argument name=”alias” xsi:type=”string”>top-menu-default</argument>

Flush cache of your site to apply change.

The megamenu module also support widget block, widget shortcode to load menu profile on frontend. So you can load it in cms page, create widget instance to load it to any other position.

 

Notice:

The megamenu menu top block was reference to the block name “store.menu” – this is default block to load catalog navigation on header of default magento 2 theme. If your custom them are using other block, you also should change the layout xml file of the megamenu to reference to right block.

The default code in module layout xml file is:

<referenceBlock name="store.menu">
			<block class="Ves\Megamenu\Block\Menu" name="catalog.topnav" template="Ves_Megamenu::topmenu.phtml">
				<arguments>
					<argument name="alias" xsi:type="string">top-menu</argument>
				</arguments> 
			</block>
		</referenceBlock>

 

Top