How to create Mega menu

1 1 1 1 1 Rating 4.00 (5 Votes)

Typically, a Mega menu is a single drop-down that appears on hover shows all the options in one large panel groups options into related categories uses icons or other graphics to help the user.

How to enable Mega Menus

In order to be able to enable the complete features list of the navigation systems, you have installed the mxmegamenu.zip
After go to Extensions >>> template manager >>> Your Template >>> Menu Types >>> Mega >>> Save

Example: we have the following menu tree

menu info
2-Adding menu icons
To be able to add icons to your menu items, first you are going to upload your favorite icons to the your_site_root/images folder.
Please note that the icons must not exceed 19x19 pixels, a must if you want avoid layout breaks. Advanced users can make this possible by customizing menus style classes.
Next, in the backend administration of your website, navigate to Menus - Main Menu, and then we will click on any menu item to add an appropriate icon for it.
Check the image below
click the Save button to apply these changes.

add image
3-Editing additional menu parameters
Grouping menu items
When you enable Mega menu for the first time, menu items will have no Megamenu parameter, therefore it will show up similar to a regular Moo Menu:

FIRST IMAGE
3 columns menu
In the image above, you can see the Features menu item having three child menu items:
Overview,
Language style,
Menu styles.

The image below shows what parameters is used in FEATURES menu for 3 columns
3 column
As you can see on the first image the menu items Overview, Language style and Menu styles have sub menus which are in groups. The image below shows how you can put them as groups. Te example is for Overview menu
groups

4-Add modules on the menu
In this section we are going to show you how to load different types of modules as menu items. Basically you can load any type of module:
custom HTML: embedded videos, external content, advertising (Google Ads or any other affiliated adds service), community links, etc;
regular Joomla! modules: login module, quick contact module, external content feeds, generally all modules you have installed in your setup;
you can also load unique module positions you have set for your modules, position that are not defined in your template.
The example below shows login form in menu

login

The settings for it is on the image below.

log module

Print