Magetop Mega Menu Extension Guide

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

Magetop Mega Menu Extension

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.

Go to Setting
Configuration

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.

Go to Import Sample Data
Mgm Import demo
  • Groupmenu Id: Select Groupmenu ID want to import.
  • Action: Select Action wants to perform.
    • Install.
    • Uninstall.
  • Click Submit button to perform action.
Click Submit button

II.3. Manage Groups

II.3.1. Manage Menu Groups

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

Go to Manage Menu Groups
Manage Menu Groups

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

Search, filter, select columns of groups

Perform mass action on the table.

Perform mass action on the table

Click Select in the Action column to select action.

Click Select in the Action column
II.3.2. Add Menu Group

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

Go to Add Menu Group

Fill in the Group Information on the form.

Add New Menu Group
  • 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)
Click Save and Continue Edit

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.

Go to Manage Menu Items
Manage Menu Items

Click Item to show Detail and Advanced Options.

Click Item to show Detail and Advanced Options

Admin can choose Store View.

Choose Store View

Click PREVIEW button to show previewing of this group menu.

Click PREVIEW button

Click here to expand all branches of group menu.

Admin can drag and drop items.

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.

Go to Add Menu Item
Add New 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

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

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

II.4.2.2. Table Layout
Table layout

Add class “dropdown-table” for leve0.

Add class dropdown table for leve0

Add class “table-layout” for leve1.

Add table layout
  • leve1: is menu show on the left column.
  • leve2: is menu show on the right column.
II.4.2.3. Tab Layout
Tab Layout

Add class “tab-layout”.

Add tab layout
II.4.2.4. Gallery Layout
Gallery Layout

Add class “gallery-layout”.

Add gallery-layout
II.4.3. Create Static Block

Go to CONTENT -> Elements -> Blocks.

Go to Blocks

Click to Add New Block button.

Click Add New Block button

Fill in the Block Information on the form.

New Block

Click Save button when complete.

II.5. HTML Content (For Developer)

Full Width:

Full Width

Grid container: This is dropdown leve0 width.

Grid column, grid container
  • 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:

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:

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:

Best Deals of the Week
<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>
Console of the Year
<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.

Follow us for the more helpful posts!

We hope this is a useful series for you.

Thank you for reading!

4.5 2 votes
Article Rating

Aaron LX

Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.

Leave a Reply or put your Question here

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x