- a small simple menu that links to pages with additional navigation as you delve deeper (Sitepoint is a good example). These are easy to use and accessible, but multiple clicks can be required to reach the content you want.
- dynamic drop-down or expanding menus that allow visitors to reach most pages no matter where they are. Whilst this provides quick navigation, accessibility can be poor and those without JavaScript might never see some pages*.
The features of a mega drop-down menus
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 ZT Mega Drop Down Menus
How to know ZT template supports Mega Menu and set up megamenu: Go to Extensions >>> template manager >>> Your ZT Template >>> Menu Types >>> MegaMenu >>> Save
If you don't see the MegaMenu as above image, that mean your current template doesn't support ZT Mega Drop Down Menu
How to configure ZT Mega Drop Down Menu
Example: we have the following menu tree
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/stories folder.
Please note that the icons must not exceed 16x16 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 Joomla! Stuff to add an appropriate icon for it.
- Step 1 - Click the Parameters (System) tab;
- Step 2 - Select your desired icon for Home menu item;
- click the Save button to apply these changes.
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:
In the image above, you can see the Joomla! Stuff menu item having three child menu items:
- Joomla! Overview,
- More about Joomla!,
- JoomlaVision.
As you see in the image above, just by selecting Yes for the Group option will group the Joomla! Overview menu item with it's child menu items into a compact column, and the parent menu item Joomla! Overview becomes the head of the first column of the main menu item Joomla! Stuff. Now we can do the same thing for the other two parent menu items: Menu More about Joomla! and JoomlaVision .
Setting up columns
We find a good idea to show you now the Joomla! Stuff menu item structure. Take a closer look at the menu structure in the left side and the frontend view in the right side. This makes sense to edit some more menu parameters:
As we marked the columns, we have to change the Joomla! Stuff menu item parameters to show up properly it's child menu items in frontend, so let's click this menu item and customize it:
- Step 1 - click the Parameters (ZT Extended) tab to edit the megamenu parameters;
- Step 2 - set the columns number to three, it will apply for each menu item: Joomla! Overview, More About Joomla! and JoomlaVision;
- Step 3 - add a custoom width for the entire child content area
- Step 4 - add a custom width for each column to make it more visual appealing
- Click the Save button, go to frontend, refresh the page and see the changes.
Loading modules as menu items
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.
Just to so show you an example, we are going to load the default Joomla! Login Module as a menu item, so first go to Menu Item Manager of the Main Menu. Now click the New button to add a new menu item, then proceed with the folowing steps:
- Step 1 - click Internal Link Menu Item Type (User >>> Login >>> Default Login Layout), as it is the most appropriate type for us to load modules, we are going to load the Login Module as the child content of this menu item;
- Step 2 - type in a Title for this menu item;
- Step 3 - select an icon for this menu item if you want;
- Step 4 - click the Parameters (ZT Extended) tab to open mega menu parameters;
- Step 5 - type in an appealing slogan/description for this menu item;
- Step 6 - select Modules content type;
- Step 7 - scroll down and select Login Form, this is the module we are going to load;
- we are going to leave all other parameters untouched;
- click the Save button and go to frontend, refresh the page, and hover your mouse over the new menu item.
