Cara membuat mega drop-down menu in Joomla 2.5

The free Genesis template from www.joomlapraise.com I use on joomm.net is a good example of a basic, professional looking template that you can easily adjust to fit your own requirements. Unlike other templates, it doesn’t come with all kinds of fancy built-in menu rendering options. However, it’s easy to add a great looking mega drop-down menu to any template by using a menu extension.

To give you an impresssion of what a megamenu looks like, here’s just one of many examples from the Web:

If you want to add a megamenu to your Joomla site, a free solution is offered by www.joomlack.fr MaxiMenu CK – it’s the menu system that you can see in action on the current site. Let’s see how you can use and customize MaxiMenu on your own Joomla-powered site.

Step 1 – Downloading and installing MaxiMenu

First, let’s download and install the free MaxiMenu CK module.

• Go to the Joomla extension site to download the Maxi Menu CK extension.

• Navigate to the Extension Manager to install the module.

• Now let’s find out where we can position the new menu module. In the backend of your website, navigate to Extensions > Template Manager, click the Templates tab and locate the template you’re using. In my case (and if you’ve followed along with the exercises in the Joomla 2.5 Beginner’s Guide, in your case too) the template is called Genesis. Click the Preview link:

• In a new browser screen, the available module positions are shown in an overlay displayed over the current site homepage. In this case, below the logo there’s a position available called banner. This position seems ideally suited for a horizontal menu:

• Now that we’ve decided where we want to place the new menu, we’ll adjust the menu module settings. Navigate to Extensions > Module Manager and open the Maximenu module to edit it.

• In the Position box, enter banner (or select it through the Select position button).

• Under Basic Options, select the Menu to render. In this case we want the Maximenu to display the contents of the Main Menu:

• Finally, in the Menu Assignment section, make sure the module is set to be displayed on all pages:

We’ll leave all other menu module settings unchanged. You’re all set: you’ve got the Maximenu module set up to display the main menu links.

Step 2 – Getting the menu to display parent and child links

To display parent and child links as desired, you’ll probably want to adjust a couple of  menu settings. On the joomm.net site, for example, I wanted to display three menu levels: the main links, the submenu links, and the fly-out menu items. These three levels should be displayed as follows:

• To get the menu do to display the three levels as shown above, you need to organize the menu items (via Menus > Main Menu) as follows:

As you can see, main links aren’t indented, submenu links are indented one position, second level links are indented two positions.

You create submenu links (as shown in chapter 8 of the Joomla! 2.5 Beginners’Guide) by opening a Menu Item and selecting the appropriate Parent Item: in the above example, Joomla 2.5 Beginner’s Guide  has Joomla books set as its parent.

Step 3 – Adding descriptions to menu links

The Maximenu module allows you to display much more than just menu links. For starters, you can add a description to any menu link. This will be shown below the main link title:

• To add a description, go to Menus > Main Menu and open the menu item that you want to chagne. Now add two vertical separators after the current Menu Title; after the separators, add the description. As an example, the Joomla Books menu item on my site in the backend Menu Title field looks as follows: Joomla Books||Teach yourself Joomla. Don’t use spaces before, between or after the separators.

• Add more descriptions as needed to achieve the effect demonstrated in the above screenshot.

Step 5 – Adding a optional module to the MaxiMenu

Another nice feature of the MaxiMenu module is that it allows you to place module contents within menu items. To see what this looks like, have a look at the following example:

How can you achieve this effect? First, create the module you want to show within the drop-down menu. In this case, we’ll use a Custom HTML module.

• Go to Extensions > Module Manager and click New. Select Custom HTML as the module type.
• In the Title field, enter an appropriate title. In this example, I’ve entered Joomla books menu module.
• In the Note field, it’s a good idea to make a note for yourself. This way, you’ll remember why you’ve added this module that isn’t shown on any page on the site in the ordinary way. In the Note field, I’ve added Module for use in Maximenu.
• In the Custom output section, add the content you want to display in the menu. In this example, I’ve added a short text and inserted an image of a book cover:

• You don’t have to assign this module to a Position, as it won’t be shown on the web page; it will be part of the menu.
• Save & Close the module.
• In the Module Manager, you can find the ID number of the module. In this example, it’s 97. Make a note of this number; you’ll need this information to add the module to the MaxiMenu.

• To get the module to display within the menu, go to Menus > Main Menu. Now click New to add a new menu item. As the Menu Item Type, select Text Separator.
• In the Menu Title field, enter the ID of the module you want to show as follows: [modid=97]. Again, 97 is the ID number in this example. In your case, the ID number will be different.

• Select the appropriate Parent Item. This determines where the module will show up in the menu. In this case, I’ve selected Joomla books as the parent, so the module will be displayed when the visitor selects the Joomla books menu link.
• Using the Ordering options, you can further determine the position of the module. In this case, I’ve chosen to display the module as the first item:

• Save & Close the new menu item. Your menu is finished! It should now look similar to the example shown below:

Step 6 – Explore!

The MaxiMenu module offers much more settings and options to allow you to customize the display. Another example is the use of columns within the drop-down menu items; you can learn more about this in my tutorial How to add columns to a megamenu in Joomla 2.5.

To find out more about MaxiMenu CK, have a look at the developers website: http://www.joomlack.fr/en/joomla-extensions/maximenu-ck. Here you can also download the official documentation (for a reasonable fee).