Mega Menu

Enabled – If ticked the Mega Menu will be enabled (this setting will enable the widget for the Mega Menu plugin).

Here, you can access all your menus. You can add new menus and edit or delete existing menus.

General settings

▪Enabled – If ticked, the Mega Menu will be enabled.

▪Show dropdowns on click – If checked the dropdowns of the menu items will be shown on mouse click.

▪Name - The name of your menu.

▪CSS class – Additional CSS class will be added to the menu element. It can be useful for styling purposes.

▪Widget zone – The widget zone where your menu will appear.

Note: If you use the default theme, content_before should be selected.

Limited to stores – Multi-select of all the stores you want your Mega Menu to be limited to. Leave the Limited to Stores Multi-select empty if you want your menu to appear on all of your stores.

Menu items

You can edit your Mega Menu in the Menu Items tab. The page is split into two columns. On the right side of the page, you can arrange your Mega Menu Items. You have the ability to see how your Mega Menu will appear on the public store. The menu items can be moved, arranged and nested. They can be drag and dropped to the place you want them to occupy.

Note: The nested menu items won't show on the public store if their parent menu item won't show on the public store.

The left side of the page is where you can choose your menu items from. The Mega Menu plugin offers you seven types of pages you can choose from:

Pages

From the Pages tab, you can choose from a list of predefined default pages to add to your Mega Menu.

Categories

The Categories tab offers you a list of all the categories that are enabled and are added to the top menu.

You can add all of your categories in a single menu item, with a default name of Products by choosing the All radio button, or add specific categories by choosing the Specific Categories radio button.

Manufacturers

The Manufacturers tab offers you a list of all the manufacturers on your store.

You can add all of your manufacturers' pages in a single menu item, with a default name of Manufacturers by choosing the All radio button, or add specific manufacturer pages by choosing the Specific Manufacturer radio button.

Vendors

The Vendors tab offers you a list of all the vendors on your store.

You can add all of your vendors' pages in a single menu item, with a default name of Vendors by choosing the All radio button, or add specific vendor pages by choosing the Specific Vendor radio button.

Topics

The Topics tab in offers you a list of all your store topics to add to your Mega Menu.

You can add all of your Topic pages in a single menu item, with a default name of Topics by choosing the All radio button, or add specific topic pages by choosing the Specific Topic radio button.

Note: You would have to Include a topic in the top menu before you add it to the Mega Menu. You can do that from Administration > Content Management > Topics(Pages).   Some Topic Pages don't have a 6itle. Their name in the Topics tab is enclosed in brackets. You would have to give them a title from Administration > Content Management > Topics(Pages).

Product Tags

The Product Tags tab offers you a list of all the vendors on your store.

You can add all of your product tags pages in a single menu item, with a default name of Product Tags by choosing the All radio button, or add specific product tag pages by choosing the Specific Product Tag radio button.

Custom Links

You can add custom links to your Mega Menu from the Custom Links tab. You need to specify a title and URL for your Mega Menu item.

The Mega Menu offers you a variety of actions while editing it. You will be able to move, nest,edit and remove your menu items.

Moving menu items

Moving menu items happens with a simple drag/drop action.

Nesting menu items

Nesting menu items also happens with a simple drag/drop action. You will need to move the menu item under the desired parent menu item, move it to the right and drop the menu item.

Editing menu items

The Mega Menu plugin gives you the ability to completely customise your menu items. By editing your menu items you can change their names or the way their dropdown content appears.

You can edit a menu item by clicking the down arrow at the right end of the menu item. A menu will pop up, where you can edit the menu item settings.

Removing menu items

You can remove menu items by clicking on the Remove button.

The Mega Menu gives you the ability to create easy navigation through the categories of your store for your customers. You can include menu items of your categories in your Mega Menu.

Whether you choose to display all your categories in a single MENU ITEM or one by one in different menu items, the Mega Menu offers you a list of settings from which you can control your category menu items.

▪Title – You can change the name of your menu item from here.

▪CSS class – Additional CSS class will be added to the menu element. It can be useful for styling purposes.

▪Template – You can choose the template of the category menu item dropdown from here. There are three templates you can choose from: Simple, With Pictures, List.

If you choose the Simple template your category menu item will not have a dropdown and will be a simple link.

If you choose the With Pictures template your category menu item dropdown will display boxes of the sub-categories which include the subcategory name, sub-category title and the sub-categories of that sub-category.

Choosing the List template will make your category menu item dropdown display your subcategories in a list.

▪Number of sub-categories per category item – You can set the number of sub-categories per category box.

▪Number of boxes per row – The number of subcategory boxes for the category menu item dropdown.

▪Image size – The image size for the boxes in the category menu item dropdown.

You can display the Mega Menu in different widget zones. In this example, we will be looking at how to display a menu in your footer.

1.Edit the ~\Views\Shared\Components\Footer\Default.cshtml file.

2.Add @await Component.InvokeAsync("Widget", new { widgetZone = "footer_column_1" }) after the following code:

<div class="title">

<strong>@T("Footer.Information")</strong>

</div>

3.Edit ~\Plugins\SevenSpikes.Nop.Plugins.MegaMenu\SupportedWidgetZones.xml file and add another widget zone record:

<WidgetZone>footer_column_1</WidgetZone>

Note: You can change the footer_column_1 widget zone to one that best describes your widget zone.

4.Restart your Jim2Commerce application

5.Go to Administration > Nop-Templates > Plugins > Mega Menu > Manage Menus. Edit your menu and choose your newly created widget zone from the Widget Zone setting.

6.Change the CSS class setting to list in order for the footer styling to be applied to the menu.

Note: Displaying your menu to any non-standard widget zone will require you to re-style it.   Only simple links can be displayed in the menus that are displayed in any non-standard widget zones.