I. Install Module.
Magento2 ExtenStore MegaMenu module installation is very easy, please follow the steps for installation-
1. Unzip the respective extension zip and create Extenstore(vendor) and Megamenu(module) name folder inside your magento/app/code/ directory and then move all module’s files into magento root directory Magento2/app/code/Extenstore/Megamenu/ folder.
Run Following Command via terminal
———————————–
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
2. Flush the cache and reindex all.
now module is properly installed.
After the module is installed, we need to enable the module in admin:
Stores => Configuration => EXTENSTORE => MegaMenu => General Settings => Enable => Yes
=> Save and Clear cache => Now we can config the module.
II. Config Module.
Config Menu display Horizontal or Vertical
Stores => Configuration => EXTENSTORE => Es MegaMenu => Menu Display Type
Config Menu’s theme:
Stores => Configuration => EXTENSTORE => Es MegaMenu => Menu Theme
Config Sticky Menu
Stores => Configuration => EXTENSTORE => MegaMenu => Sticky Menu
General Setting 1
- Default Menu Type: Options – Full Width, Static Width, Classic.
- When we select Static Width, it will appear one more param is “Static Width” below where you can put value for width (pixel).
- Menu Theme: Options – Theme 1, Theme 2 … Theme 14, Your Theme.
- When we select Your Theme we can define your theme in file view\frontend\web\css\style.css, we will see css code like this “.es_megamenu .es_mm_items.theme14” and we only need duplicate these code and change to “.es_megamenu .es_mm_items.yourtheme”. Now you can change css like you want.
- Max Width: Config max-width for menu.
- Menu Font size: Config font-size for menu item level 1.
- Visible Menu Depth : Config Level of menu will display.
General Setting 2
- Menu Font Size: Set font-size for menu item level 1
- Visible Menu Depth: Set level of menu will display.
- Menu Display Type: Menu can displays 2 types are Horizontal & Vertical
- Submenu Effect: Support 3 effects for submenu’s appear – Default, Fade In/Out, Slide Up.
- Show Home Button: Select Yes to show Home button on menu .
- Home Button Icon: We can add icon class for home button. Eg: if we are using fontawesome, we can add home icon class is “fas fa-home“
General Setting 3
We can config Background Color for menu, config Text Color and color for text when hover, text color for active status.
General Setting 4
This settings are for submenu with mega style. We can config background color for submenu, text color for submenu and text color when hover.
General Setting 5
This settings are for submenu with css style. We can config background color for submenu, text color for submenu and text color when hover.
General Setting 6
Config the menu display Sticky or not. When we select Yes, if we scroll the page, the menu will always display on top.
General Setting 7
We can add a static block on the top or the bottom menu. we only need put Static Block Id.
Menu Item Settings
These settings are for each menu item when we edit a category
(Admin => CATALOG => Categories)
Item Settings 1
- Sub Menu Columns Width: If this item’s submenu has 2 columns, we want to set the first column is 300px and the send column is 500px of width. We can put value is: 300|500
- Hide This Menu Item: Select Yes to hide this menu item from menu.
- Font Icon Class: Put the class of icon font that we want it display in front of this menu item.
- Eg: if we use fontawesome and want to show phone icon you can put fas fa-phone to this param.
- Show Menu Content: If we select Yes, it will show menu item’s description.
- Show Menu Block: If we select Yes, it will show block in Content=>Add CMS Block when config menu item
Item Settings 2
- Menu Width: We can put auto or set with is px (eg: 100px).
- Sub Menu Type: 2 type for submenu are Mega Menu & Css Menu
- Sub Width Type: Menu support 3 types of width:
- Default: Menu’s width will auto
- Static Width: Select this, we can put with value (eg: 800px) in param Sub Menu Width below
- Full Width: Width of submenu will auto display full.
- Sub Menu Columns: Config number of columns for submenu.
Item Settings 3
- Sub Content Top: Show content on top of submenu
- Sub Content Rigth: Show content on right of submenu
Item Settings 4
- Sub Content Bottom: Show content on Bottom of submenu
- Sub Content Left: Show content on Left of submenu
