Magetop Mega Menu Extension Guide will give you solid understanding of how to use Extension. These Magento 2 tutorials cover back-end and front-end development.

I. Introduction

Magento Mega Menu is an easy to use plugin for creating beautiful, customized menus for your site. With no setup required, tons of options to choose from, and the ability to show categories, subcategories and posts, Magento Mega Menu is a must have plugin that also boosts SEO and user engagement.

Highlight features:

Drag and drop menu builder panel.
Widgets in menu.
Multiple themes/skins option.
Search bar in menu.
Menu labelling/badge, ex: hot, new, etc.
Responsive support.
Mobile menu support.
Menu background image.
Unlimited colors.
Unlimited options.

II. How to configure

II.1. Configuration

Go to MEGAMENU -> Configuration -> Setting.

General Settings

Enable in frontend: Select “Yes” to show mega menu in front-end.

Font

Base Font Family – Google Fonts: Select font for mega menu.

Basic Font Size: Choose size of font. (12 px -> 18 px)

Leve0 Font Size: Choose size of leve0 font. (12 px -> 18 px)

Leve0 padding: Enter leve0 padding. Ex: 25px. Leve0 padding left-right.

Leve0 line-height: Enter height of leve0 line.

Leve0 text-transform: Select “Yes” to allow use text transform.

Optimization Performance

DEVELOPER MODE: Select “No” when you have done the menus and ready to publish, then MTM will process to generate menu items as static HTML codes to speed up loading time. It will be very fast. This is very helpful option when you have enabled the “Auto show sub category”.

Refresh to update: Press REFRESH to update if you have do some changes on any menu item or group(such as rename, delete, add or edit, translate, re-order position, etc) but it does not show the new changes on the frontend.

II.2. Import Sample Data

Go to MEGAMENU -> Configuration -> Import sample data.

Groupmenu Id: Select Groupmenu ID want to import.

Action: Select Action wants to perform.
- Install.
- Uninstall.

Click Submit button to perform action.

II.3. Manage Groups

II.3.1. Manage Menu Groups

To go to Manage Groups, choose MEGAMENU -> Group -> Manage Menu Groups.

The Admin can search, filter, select columns of groups to display on the table.

Perform mass action on the table.

Click Select in the Action column to select action.

II.3.2. Add Menu Group

Go to MEGAMENU -> Group -> Add Menu Group.

Fill in the Group Information on the form.

Title: Enter the Group menu title.

Animations: Select an animation for menu.

Positions: Select position to show menu in front-end.

Responsive: Select responsive type for menu.

Color schemes: Enter the HEX color or select color in the color picker.

Enable sticky menu: Select “Enable” to enable sticky menu.

Sub-Menu Trigger Click: If select “Enable”, user need to click to show sub-menu.

Status: Select “Enable” to enable this group menu.

How to embed?: Press “Save And Continue Edit” to saved and get the embed code(XML or Widget block)

Then you will get the following code:

1, Insert into Static block or CMS page for developing: 

{{block class="Magetop\Megamenu\Block\Menu" name="megamenu_group_1" groupmenu_id="1" template="Magetop_Megamenu::megamenu/megamenu.phtml" }}

2, Reference via XML layout file( to replace the default menu or other purpose):

<block class="Magetop\Megamenu\Block\Menu" name="megamenu_group_1" ifconfig="megamenu/setting/enable" template="Magetop_Megamenu::megamenu/megamenu.phtml">
    <arguments><argument name="groupmenu_id" xsi:type="number">1</argument></arguments>
</block>

3, Call via frontend template file: 

<?php echo $this->getLayout()->createBlock("Magetop\Megamenu\Block\Menu")->setGroupmenu_id(1)->setTemplate("Magetop_Megamenu::megamenu/megamenu.phtml")->toHtml(); ?>

Click Save button when complete.

II.4. Manage Items

II.4.1. Manage Menu Items

Go to MEGAMENU -> Menu Items -> Manage Menu Items.

Click Item to show Detail and Advanced Options.

Admin can choose Store View.

Click PREVIEW button to show previewing of this group menu.

Click here to expand all branches of group menu.

Admin can drag and drop items.

When complete, click Save button.

Note: Use Ctrl+z to undo a mistake!

II.4.2. Add Menu Item

Go to MEGAMENU -> Menu Items -> Add Menu Item.

Details

Menu item type: Select type of link.

Menu title: Enter the title of menu item that display in the menu.

Add custom class:
- dropdown-table
- table-layout
- tab-layout
- gallery-layout

Status: Select “Enable” to display this item in the menu.

Assign menu group: Select menu group for item.

Parent item: Select parent of item.

Visible in: Select which store menu item will appear in.

Sub Column Layout: Select sub menu items column layout.

Advanced options

Access permission: Select customer group that is allowed to view this item.

Target window: Select target browser window when item is clicked.

Hide on Phone: Select “Yes” to hide this menu item on phone devices.

Hide on Tablet: Select “Yes” to hide this menu item on tablet devices.

Custom link title: Enter link for title.

Upload item thumbnail: Upload image that is thumbnail of menu item.

Use font icon instead image thumbnail?: Enter icon font-class.

Show/hide thumbnail: Select “Show” to show thumbnail, “No” to hide thumbnail.

Text Align: Select Text Align for menu item.

II.4.2.1. Auto sub layout

Select “No sub item” in Sub Column Layout to enable it.

II.4.2.2. Table Layout

Add class “dropdown-table” for leve0.

Add class “table-layout” for leve1.

leve1: is menu show on the left column.
leve2: is menu show on the right column.

II.4.2.3. Tab Layout

Add class “tab-layout”.

II.4.2.4. Gallery Layout

Add class “gallery-layout”.

II.4.3. Create Static Block

Go to CONTENT -> Elements -> Blocks.

Click to Add New Block button.

Fill in the Block Information on the form.

Click Save button when complete.

II.5. HTML Content (For Developer)

Full Width:

Grid container: This is dropdown leve0 width.

2 Columns: width: 155px;
3 Columns: width: 233px;
4 Columns: width: 311px;
5 Columns: width: 389px;
6 Columns: width: 467px;
7 Columns: width: 545px;
8 Columns: width: 623px;
9 Columns: width: 701px;
10 Columns: width: 779px;
11Columns: width: 857px;
12Columns: width: 935px;

Grid column: This is dropdown leve1 width.

2 Columns: width: 16.666666%;
3 Columns: width: 25%;
4 Columns: width: 33.333333%;
5 Columns: width: 41.666666%;
6 Columns: width: 50%;
7 Columns: width: 58.333333%;
8 Columns: width: 66.666666%;
9 Columns: width: 75%;
10 Columns: width: 83.333333%;
11Columns: width: 91.666666%;
12Columns: width: width: 100%;

List style:

Style 1:

<ul class="category-list">
  <li><a href="#">iPhone 6 Plus</a></li>
  <li><a href="#">iPhone 6</a></li>
  <li><a class="read-more" href="#">View All</a></li>
</ul>

Style 2:

<ul class="l-specs">
  <li><a href="#"><i class="fa fa-check"></i>Windows 8.1 64-bit</a></li>
  <li><a href="#"><i class="fa fa-check"></i>Technical details: Core i7 Processor; 4GB memory; 1TB hard drive</a></li>
  <li><a href="#"><i class="fa fa-check"></i>Special features: Built-in wireless networking and bluetooth</a></li>
</ul>

Style 3:

<ul class="l-specs">
  <li><a href="#"><i class="fa fa-caret-right"></i>Desktop CPUs</a></li>
  <li><a href="#"><i class="fa fa-caret-right"></i>Server CPUs</a></li>
  <li><a class="read-more" href="#"><i class="fa fa-caret-right"></i>Show All</a></li>
</ul>

Style 4:

<ul class="small-list num-bullet">
  <li><a href="#">Xperia C3</a></li>
  <li><a href="#">Asus MemoPad 8</a></li>
  <li><a href="#">Toshiba Chromebook 2</a></li>
</ul>

Style 5:

<ul class="small-list a-center">
  <li><a href="#">10 Point Touch</a></li>
  <li><a href="#">Capacitive Touch</a></li>
  <li><a href="#">Dual Point Touch</a></li>
</ul>

Effect with image content:

Style 1:

<div class="container-ov overlay-icon">
  <img src="http://livedemo.magetop.com/menupro/pub/media/mcpDemo/desktop.jpg">
  <a class="fa fa-facebook" href="#"></a>
  <a class="fa fa-twitter" href="#"></a>
  <a class="fa fa-google-plus" href="#"></a>
  <a class="fa fa-pinterest" href="#"></a>
</div>

Style 2:

<div class="container-img">
  <img src="http://livedemo.magetop.com/menupro/pub/media/mcpDemo/notebook.jpg">
  <div class="flipY-caption a-center item-fle">
    <h3>$1745.00</he>
    <ul class="inline-list">
      <li><a href="#"><i class="fa fa-link"></i></a></li>
      <li><a href="#"><i class="fa fa-comment"></i></a></li>
      <li><a href="#"><i class="fa fa-star"></i></a></li>
      <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
    </ul>
  </div>
</div>

Style 3:

<div class="container-img">
  <img src="http://livedemo.magetop.com/menupro/pub/media/mcpDemo/screen.jpg">
  <div class="slideDown-caption a-center">
    <ul class="small-list">
      <li><a href="#">10 Point Touch</a></li>
      <li><a href="#">Capacitive Touch</a></li>
      <li><a href="#">Dual Point Touch</a></li>
      <li><a href="#">View All</a></li>
    </ul>
  </div>
</div>

Easy buld gird colum in block:

<div class="lg-row">
  <div class="grid-column8">
    <div class="sub-row">
      <div class="grid-column4">
         your content
      </div>
      <div class="grid-column4">
         your content
      </div>
      <div class="grid-column4">
         your content
      </div>
    </div>
  </div>
  <div class="grid-column4">
    your content
  </div>
</div>

<div class="lg-row">
  <div class="grid-column6">
      <div class="full-r">
         your content
      </div>
      <div class="full-r">
         your content
      </div>
  </div>
  <div class="grid-column6">
    <div class="sub-row">
      <div class="grid-column6">
         your content
      </div>
      <div class="grid-column6">
         your content
      </div>
    </div>
  </div>
</div>

III. Conclude

Above is our guide for Magetop Mega Menu Extension Guide. If you have any questions please boldly contact us. We will help you. Thanks for reading.

It comes to the end of the blog: Magetop Mega Menu Extension Guide.

You can read more useful posts like Magetop Gift Card Extension Guide.

We hope this is a useful series for you.

Thank you for reading!

4.5 2 votes

Article Rating

Magetop Blog

Magetop Mega Menu Extension Guide