...
- Flexible Mega Menu configurations
- Create multi-level menu using drag & drop or hyperlink
- Add pages, categories or custom item(s) to the menu
- Generate menu according to existing categories automatically
- Create label(s) for the menu
- Assign label to each menu item
1. Configuration
1.1 General configuration
- Enable Mega Menu: to enable/disable the module
- Select Mega Menu: Set up the menu to be used for the site here. You can create the menu in Mega Menu > Manage Menus
- Effect: The effect to show menu and submenu on the store front
1.2 Default Menu Configuration
- In this settings, you can customize the default menu text color, hover text color, hover button background color and drop-down background color.
- Note that the default menu will only be used if there is no mega menu selected.
2. Create a label
- Go to Mega Menu > Manage Labels, you can manage all the available labels in the grid table.
- You can edit or delete the label by clicking on the Select in Action column.
- Or you can create a label by clicking on the Add New Label button.
...
- Title: The label name displayed in the back end
- Text: The content of the label
- Position: Set the position of the label on the item name (Top, Left, Right, Top Left, Top Right)
- You can change the font size of the text, the label width and height, the text alignment and text color.
- You can also add a border to the label with 5 types of border styles: Dashed, Dotted, Double, Solid or No style/None.
- Border radius: The rounded corners of the label
- You can add the arrow to point the label to the menu item. With the arrow, you can edit the width and color.
3. Create a new menu
Go to Magento 2 backend > Mega Menu > Manage Menus
- You can click on the Generate Sample Menu button to generate menus according to your categories with Grid type and default colors.
- Or click on Add New Menu to create a custom menu.
On add new menu page:
3.1 General Settings
- Menu Name: The menu name will be displayed in Magento 2 backend for management.
- Menu Template: You can select the menu direction as horizontal or vertical left.
- Custom Css: You can customize/style the menu using CSS.
3.2 Menu Settings:
- In the Menu Structure, users can use drag & drop to configure the menu's level.
- On the right column, there are 3 tabs: Pages, Categories, Custom Item that allow you to add pages, categories or custom page to the menu.
- You can add one or more items to the menu by selecting the item(s) then click on the Add to menu button.
- Then you can drag and drop the item in the menu structure to create the submenu(s).
- You can edit each item with the green icon of each one or remove them from the menu list with the delete (red) icon.
3.3 Customize menu item
Information:
- Name: The menu name that will be displayed on front end.
- Link: The menu url or url key.
- Class: You can add a class to customize the item with CSS.
- Icon: You can upload the icon for each item. It will be displayed on the left of the item on the main menu bar.
- Label: You can create the label in Mega Menu > Manage Labels.
Style:
- Admin can:
- Choose the Text Color, Hover Text Color, Hover Button Background Color from RGB color picker.
- Add the content in Header, Footer, Left Block and/or Right Block.
- Enable/disable each one and edit with HTML and CSS.
- You can preview the mega menu before saving by clicking on the Preview button.
- Main Content: You can use content editor or use different types of content: default list, grid or tab.
...