CTM Laboratorio

Template Administration

Mega Menu Guidelines

In this section I am going to show you how to set up the Mega Menu. This is a quick step by step guide on how to edit your main menu items for a more satisfactory design and usability.

Get the basics of Joomla! Menu Management, right here.

Adding menu item descriptions

In the back-end administration of your website (your-website.com/administrator), navigate to Menus - Main Menu (or any other menu you have set as default), and then click on Home (or any other menu item) to add an appropriate description for it, then follow this quick guide:

• Click the Parameters (JA Extended) tab to edit the Mega Menu parameters.
• Add a description or a slogan for the menu item in the Add Description parameter field. Try to make it simple and short.
• Click the Save button to apply this change.

Adding menu icons

To be able to add icons to your menu items, first you have to upload your favorite icons to the your_site_root/images/stories folder for Joomla! 1.5, but for Joomla! 1.6 you can also create a special folder for your icons, outside the stories folder and inside the general images folder.

Please note that the icons must not exceed 16x16 pixels, a must if you want avoid layout breaks.

So while browsing the Menu Manager, click on a menu item that you want to add an icon for, then follow this quick guide:

• Click the Link Type Options in Joomla! 1.6 or Parameters (System) for Joomla! 1.5 tab.
• In Joomla! 1.6, for the Link Image text field, click the Select button and browse for your desired icon for Home menu item in all the images folder. In Joomla! 1.5, for the Menu Image parameter, select your desired icon from the dropdown box; your icons must be located in images/stories folder.
• Click the Save button to apply this change.

Grouping menu items

If your menu has no Mega Menu parameter settings, your menu will look like CSS Menu. Grouping menu items refers to grouping a parent menu item with it's child menu items to form a compact column. To do that please open a parent menu item (one having at least two child menu items) and follow this quick guide:

• Click the Parameters (JA Extended) tab;
• For the Group parameter select the Yes option.
• Click the Save button to apply this change.

Click here to read a more detailed guide in the wiki resource.

Setting up columns

Working on a parent menu item Articles having at least two child menu items (grouped also): Health and Sport, the next thing could be to set up two columns for each of the two child menu items. Similarly for three child menu items you could set three columns, but for four child menu items you can set two/four columns, just to make it more suitable for your design.

So, to set up columns for a menu item considering the above data, please follow this guide:

• Click the Parameters (JA Extended) tab to edit the Mega Menu parameters;
• Set the columns number to 2 for the Columns parameter.
• Add a custom width for each column to make it more visual appealing, especially for the Youtube video player that exceeds the default column width of 200 pixels;
• Click the Save button.

Loading modules as menu items

In this section I am going to show you how to load modules as menu items. Basically you can load any type of module, just make sure it's a usable feature for your website.

So, let's load the default Joomla! Login Module as a menu item. Go to Menu Item Manager of the Main Menu. Click the New button to add a new menu item, then follow this guide:

• Click Separator Menu Item Type (Joomla! 1.5) or Text Separator (Joomla! 1.6).
• Click the Parameters (JA Extended) tab to open Mega Menu parameters.
• Type in a Title for this menu item.
• Select Modules subcontent type.
• Select your module, for instance Login Form.
• Click the Save button to save the new menu item.

Similarly you can use the Module positions subcontent type.

For more about Mega Menu, please visit the parameters reference section, or watch a Video Tutorial on Mega Menu.