How to Create a Drop-down Menu in Joomla

How to Create a Drop-down Menu in Joomla

A drop-down menu allows the user to peruse your entire navigation without having to go to inner pages. The advantage seems clear from a usability perspective, but note that javascript is often used to run these menus, which means sometimes technical difficulties will be had.

Your template determines the ease of creating drop-down menus

Styling for a drop-down menu is found in the CSS files for your template. Not all templates come with drop-down menu styles, which means when you create the menu, it may not look just as you want and it may not function as desired. If you have knowledge of CSS, you can edit and/or add the style information to get the menus to look exactly as you like. If you do not have CSS knowledge, it would be best to choose a template that has these menus built in.

To know if your template includes styles for drop-down menus, contact the creator of the template. Usually if the template has drop-down menus, they are shown in a demo of a template.

Adding submenu items to your menu

Before you can create the drop-down effect, you need to add items in your menu that will "drop down" when the user hovers over the main category.

1. Open the menu item you want to turn into a secondary menu item.

2. When in the menu item, select the parent item on the left side of the screen (figure 1). All other menu items should be set according the link type of the menu item.

FIGURE 1: Select a parent item in order to create a submenu item.3. Click save. In your menu manager window you should now see this menu item indented under its parent.

How to create a drop-down menu:

1. Login into the Joomla administrator panel.2. Choose menu module to editSelect Extensions > Module Manager from the admin menu (figure 2).

FIGURE 2: Select the Module Manager3. Find Menu Module in the listIf you have a lot of modules, use the Module Type drop-down to narrow your search to just com_mainmenu module types (figure 2).

FIGURE 3: Narrow down Module list by using the Module Type drop-down4. Open menu module or create new menu moduleFind the menu module that you want to turn into a drop-down menu. Click on the name of the module to open it. If you do not have a module already, click new in the top-right corner to create a new menu module (figure 3).

FIGURE 3: Select menu module to edit or create new menu module.5. Edit module parametersOnce the module is open, you will be editing the following module parameters (figure 4).

FIGURE 4: Edit module parametersa. Menu Name:Choose the name of the menu you want displayed

b. Menu style:Set this to 'List'

c. End-level:Change to 1 or more. 1 will give you one level of drop-down menu items. If you have more than one (as this website has), change it to 2.

d. Always show sub-menu items:change to 'Yes'

6. Modify Advanced ParametersYou will need to modify the Advanced Parameters per instructions provided with your template. Usually they will require a menu class suffix be added (figure 5), but not always.

FIGURE 5: You may have to add a module or menu class suffix in the advanced parameters. Check with your template company.7. Click save and check your work.The drop-down menu is not working

There are several reasons the menu may not be working:

1. There is javascript (or jquery) built into the functionality of the template, or you have installed an extension with javascript (or jquery), and it is conflicting with the drop-down menu. If you look at the Error Console in your browser it should say if there is a javascript or jquery conflict.

2. If you have not CSS installed in your template to stylize the drop-down menu.

3. You have not input the proper menu class suffix.

4. You have not created any secondary menu items which would create the drop-down effect.

Using an Extension for Drop-down menus

If you still can't get the drop-down menu to work, it might be easier to install a Joomal drop-down menu extension. These extensions are so popular there is aDrop & Tab Menu Extensions categoryin the Joomla Extension Directory.