CleverSoft Network  

Founded in 2008, CleverSoft quickly confirmed its position as one of the innovative young companies in the field of Website Design & Development, Online Marketing and Training Services.

Work With Us
Jan 2011

How to enable ZT Mega Drop Down Menus

admin Blog

enable mega menu

What is Mega Drop Down Menu?

Navigating large websites has always been a design problem. You could create a huge sitemap-like menu with links to every page, but it would become impossible to scan and grow increasingly large as more pages are added.

In general, designers choose either:

  1. 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.
  2. 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

enable mega menu

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

enable mega menu

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 16×16 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 MenusMain 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.

enable mega menu

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:

enable mega menu

In the image above, you can see the Joomla! Stuff menu item having three child menu items:

  • Joomla! Overview,
  • More about Joomla!,
  • JoomlaVision.

We are going to edit each one of them, as we need to show up their child menu items or child content along with these parent items. We are going to click the Joomla! Overview menu item to edit it.

enable mega menu

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:

enable mega menu

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:

enable mega menu

  • 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.

enable mega menu

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;

enable mega menu

  • Step 2 – type in a Title for this menu item;

enable mega menu

  • Step 3 – select an icon for this menu item if you want;

enable mega menu

  • 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.

enable mega menu

Updating…

  • sunny cheung

    Loading modules in Mega menu of ZT Balis – The cool template for Valentine is NOT work.

  • Ray Selby

    I am working on the site http://www.keepthefaith.co.uk It uses the zt_news_iii template, with a mega menu system.

    When the page loads in IE or Chrome (but not in FireFox), the drop-down boxes appear and persist on the screen, until the entire page loads.

    This looks ugly. The site owner wants me to fix it. Have you any idea how? I have tried tweaking the options with no success, yet.

  • http://gizmocelular.com Steven Rodriguez

    i get Missing ZTools plugin. when i installed the plugin

  • http://www.nulleurocent.de Gaby Klein

    Especially on very complex sites, it is often difficult for web developers to design a menu that can manage all the necessary content, allowing users an intuitive interaction and also has an aesthetic effect. It has been shown that conventional drop-down menus for complex Web sites are not suitable because they do not provide enough open space for the navigation design and thus leave a large part of navigation options hidden.

    So-called “mega drop-down menus” extend the reach of normal drop-down menus, by being able to highlight relationships between different navigation options visually. This also supports the user in their navigation decisions. Usually, mega drop-down menus are much broader and much more put options than traditional drop-down menus. As a result, lower entry points are possible and the user gets to its destination faster.

    2009 were such a mega drop-down menu as a new and innovative solution to the problem of space navigation. Because even the usability expert Jakob Nielson Web this type of navigation menu, as explained very suitability for use, although he is usually known for being very critical of most of the new site elements. He believes that they are a successful method to facilitate navigation on websites.

  • http://www.thetaoofbadass-reviews.com/ Joshua Pellicer

    This ZT Mega Drop Down Menus is a great tool for our joomla installs! Thanks and keep it up!

  • http://www.gangakinare.com/packagesandoffers.php Hotels in Rishikesh

    Cool stories. I do think the projects you got involved in had an impact as well. Had you been ‘involved in open source’ as in maintaining your own OS project, but it was something few had heard of, what would the outcome have been? In some ways you’re doing *more* for the ‘community’, but it’s a much smaller community, so your impact and reach isn’t as known. Hotels in Rishikesh

  • Mostafa Arasteh

    hi
    i have this problem too in FireFox & Other Browser
    any one can help?
    tnx a lot

  • Reza Amya

    Hi
    thanks a lot for your tutorial but the question is how I should design a template to support mega menu?

    in other word how I should prepare step two as your note:
    1. you have installed the plg_system_ztmenuparams.zip
    2. your template have supported mega menu and you have set up megamenu as your default navigation system, so this way you can set up all your desired settings

    thanks for your reading
    R. Amya

  • http://paypal-gutschein.12hp.de/ Pally

    I got the same problem in Firefox browser but the template is looking very good.

    Can anyone help?

  • http://www.centerclean.com.ua Zeka

    Tell me please does your system require mootools library for correct work?