Magento 2 Mega Menu Documentation |Landofcoder

0
2546
Magento 2 Mega Menu Documentation

Magento 2 Mega Menu extension supports you reorganize the entire list of products in a neat and spectacular way by creating dynamic navigation menus with no code required.

This Magento 2 Mega Menu Documentation covers the installation, setup, and use of this extension and provides answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.

I. Overview

1. Introduction

Introduction

Latest Version:

Magento 2 Megamenu Normal Version: Version 1.1.6 – August 27, 2021

Magento 2 Megamenu PRO Version: Version 1.1.9 – August 06, 2021

By: Landofcoder Team

2. Installation

2.1. Setup via FTP or cPanel

At now the module just supports setup via uploading module files via FTP and running Magento 2 commands.

You should go to our site, log in with your account > go to Dashboard > Download Products > then download module file “Ves Megamenu” will get the file like this “ves_megamenu.zip“ or “ves_megamenu_pro_v1.1.3.zip”. After decompressing it we will get the folder and module files for each Magento 2 version. If your site is running Magento 2.4.x, set up the module file under folder Magento 2.4.x.

After upload module files to your server with FTP client or cPanel. Please run magento 2 commands via SSH terminal:

php bin/magento setup:upgrade –keep-generated

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

php bin/magento cache:clean

2.2. Install sample data

Please follow the steps:

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

2. Select the sample data file (in download file)

Install sample data

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

Video Guide To Install Magento 2 Megamenu

View video guide at link: https://youtu.be/dBNDrcMCkvk

II. Detail Document

1. Getting started

This document covers the installation, setup, and use of this extension and provides answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.

2. Information

Magento 2 Mega Menu extension supports you reorganize the entire list of products in a neat and spectacular way by creating dynamic navigation menus with no code required.

In this Magento 2 mega menu extension, we offer various fruitful features to let customers find all desired products at the first sight.

3. Features

  • Drag & Drop Menu Builder
  • Vertical and Horizontal Menu
  • Mobile Menu: Off-Canvas Menu & Accordion Menu, Drilldown Menu
  • 7 Submenu Types: Anchor Text, Dynamic Category Listing, Product Listing, Product Grid, Child menu., Default Category Listing, Content
  • Unlimited Menu Possibilities
  • Widget Support or add code to file XML on any position
  • Multiple Animations Effects Supported
  • Structure Preview
  • Auto Data Backup
  • Use Custom Menu For Mobile
  • REST API Support
  • Dynamic Magento 2 Navigation Menu
  • Right To Left Language Support

4. Module Configuration

Go to admin > Stores > Configuration > Venustheme > Ves Megamenu:

Module Configuration 1
Module Configuration 2

5. Create New Megamenu Profile

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

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

Create New Megamenu Profile

There are two tabs: General Settings, Menu Editor (for the normal version, PRO version is more advanced)

Edit menu profile (Normal Version):

Create New Megamenu Profile 2
Create New Megamenu Profile 3

Edit menu profile (Pro Version):

Create New Megamenu Profile 4
Create New Megamenu Profile 5
Create New Megamenu Profile 6

General Settings Tab

Create New Megamenu Profile 7

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:

Create New Megamenu Profile 8

Additional Class: Add custom classes

Disable Dimensions: Enter the width(pixel) want to disable this menu. The menu will be removed when your screen width is 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 screening width is more than 768px. There are 3 template types:

 Horizontal Menu

Create New Megamenu Profile 9

Vertical Menu Left

Create New Megamenu Profile 10

Vertical Menu Right

Create New Megamenu Profile 11

Mobile template: There are two template types:

Create New Megamenu Profile 12
Create New Megamenu Profile 13

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 managing menu items

6. Configure menu item

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

A menu item has 8 tabs:

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

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

Configure 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 shortcode: {{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 an icon for this item, then update the icon position

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

Configure menu item 2

Disable Dimensions: Enter the width(pixel) want to disable, the menu will be hidden when screening 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 are four alignment types for the menu content to appear

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

Configure menu item3

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

Configure menu item 4

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

Configure menu item 5

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

Configure menu item 6

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

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

Configure menu item 7

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

Configure menu item 8

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

Configure menu item 9

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

Configure menu item 10

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,…

7. Show menu on frontend

Default menu profile with alias = “menu-top” (normal version) or “top-menu” (pro version) will show on frontend. 

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

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

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

7. Show menu on frontend

III. Support Information

If you have any questions or requests, please contact us at [email protected]. We are very happy to assist you!

Website: https://landofcoder.com/

Blog: https://blog.landofcoder.com/

Support: https://landofcoder.ticksy.com/

Thank you and stay safe!

People also search for:

  • magento mega menu documentation
  • Guide for Mega Menu for Magento 2
  • how to add mega menu in magento 2
  • magento 2 custom navigation menu
  • magento 2 mega menu free by landofcoder
  • how to add menu in magento 2 frontend
  • magento 2 mega menu extension
  • mege menu extenstion for magento
  • guide for mega menu extension
build your own magento store

NO COMMENTS

LEAVE A REPLY

*