Hosted by

Thanks to

Permalinks

The Art of Joomla: tutorials for Joomla developers, site implementers and artisans.

Artisan: a skilled worker who practices some trade or handicraft.

Written and maintained by Andrew Eddie - Joomla master developer.

Following on twitter?

@theArtOfJoomla

@AndrewEddie

Facebook new!

the Art of Joomla / Issue 2

Issue 2

the Art of Joomla - Web Master Moments

More Menu Tricks – the Split Menu Technique

Written by Andrew Eddie

Labels: Menus

Many template designers have included what we called a “split menu” technique by providing some extra functions within their template. While this worked, it wasn't very flexible because you were generally limited to where you could put the respective menus. Well, in Joomla 1.5 we change all that.

How the split menu works is that you have, for example, one main menu with menu sub-menus. Your template may include a “top” menu bar that lists all of the top level menu items. When you click on one of the menu items, the split menu highlights the top menu item and only displays the sub-menu items in one of the side module positions.

The menu module in Joomla 1.5 supports two new menu parameters – start level and end level. This allows you to control the levels shown relative to the active menu item. Here are the steps for setting this up.

Create a your menu as normal, including sub-menu items as required for your site.
Create a new Menu Module. Place it in the menu position that is for your top menu bar or your main navigation (styling of that menu is up to you). Select the menu. Now, in the parameters set the start and end level to 1. This module will probably be displayed on all pages. Publish and save that module.
Create a second Menu Module. Place it in one of your columns where you want the split menu to appear. Select the same menu as for the other module. In the parameters for this one, set the start level to 1 and the end level to, say, 3. This module will probably be displayed on all pages as well. Publish and save the module.

Now have a look at your site and cruise around the main navigation menu. All going well, you will see the sub-menu appear in the right place, and the top level menu item will be highlighted as well (if your template supports that).

One of the reasons you use this technique is that you can maintain a single main menu tree with two extra support modules. Previously you could achieve most of this effect with multiple menus and multiple modules assigned to specific pages but you lost the ability to highlight the active menu item, and there was a lot more administration overhead to set it up. This is just one of several improvements that make life easier when you are setting up your site. I hope you enjoy using it on yours.