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

Hosted by

Powered by

Comments

Labels

Magazine

Thanks to

Permalinks

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.

111 Votes

32 Comments

Feed

Eric makes this comment

Friday, 05 June 2009

Say you have a Top Nav with Menu Items: Women | Men | Children. When you're on the Children page, you have a Left Menu with menu Items: - New Arrives - Dress - Casual - etc. How does this split technique work in this case? Wouldn't you need to make 3 different split_menu modules? This tutorial has help cleared things up a little, but needs some more details. Thanks
Sanat makes this comment

Wednesday, 03 June 2009

You are a lifesaver man... great tip
Alexander Diaz makes this comment

Saturday, 23 May 2009

Dan Walker in order to validate you must a Menu Class Suffix to your menus modules so you wont repeat the double id issue
Ruth makes this comment

Wednesday, 13 May 2009

Hi, Great article but this breaks my main menu which I need to use images rather than text (eg "Home" is a picture of a house and so forth). Any ideas? Whenever I publish a sub-menu item the graphical menu (main menu) stops at that point and goes no further.
Sebastiaan makes this comment

Wednesday, 13 May 2009

Finally! I gave up hope till I found this article. Keep in mind, the menu must be set to 'list', otherwise the start-end level 1 won't apply.
Houman makes this comment

Monday, 27 April 2009

Mate it is awesome, you just saved me million hours of making menu. Cheers
Sam makes this comment

Thursday, 19 March 2009

Hi, Does anyone know of the solution for the legacy menu styling problem? I too have to change the menu style to list in order to get this to work, but then I lose all high-lighting of my menus! Regards, Sam.
msquared makes this comment

Monday, 02 March 2009

Strange... I can't get the leftnav to work unless I expose every level starting at 0. I guess I could hide the rest of the nav with CSS but that would be quite an ugly hack.
Andre makes this comment

Monday, 23 February 2009

Wow, great article! It's always nice to find exactly what you're looking for. THANK YOU!
Xanti makes this comment

Saturday, 31 January 2009

I was looking for this for two days and was studiyng the posibility toi use Extendd menu when I see this fantastic and simple explanation that solved all my problems. Thank you very much for taking the time to write it.
Dan Walker makes this comment

Saturday, 31 January 2009

When I set up the split menu system, it seems to no longer validate. The problem is that both menus now contain id="current" Is there anyone around this so that the split menu page validates?
suraj kaushik makes this comment

Tuesday, 20 January 2009

hi, thanks, before looking at your article, i have done all these in my site but now when a user clicks on any of the sub menu item the child items appears but page also reloads i need child items to be appear on mouse over can it be done. do you know any module or plugin. please help me everybody. even i use accordian menus but it shows the same menu on all the pages.
anne makes this comment

Tuesday, 11 November 2008

Thanks a lot for at great article, Andrew Eddie.
Kathryn makes this comment

Tuesday, 14 October 2008

Well done! This is exactly what I've been looking for - this has saved LOADS of work. Many thanks!
waader makes this comment

Wednesday, 24 September 2008

Thank you for this very helpful description. Works like a charm. But there is one little thing that I can not figure out. When selecting a menu item from the horizontal menu (1. level) the very first article of the splitted vertical menu (2. level) gets displayed by default. The clicked menu item in the horizontal menu is highlighted. As the first article of the vertical menu is displayed it should be highlighted too. The selected horizontal menu item gets the id “current” and the class “parent active” so it is easy to highlight this item via css. The first menu item in the vertical menu gets no distinct selector. Is there a parameter or something else that I am no aware of controlling the desired behaviour?
yaza makes this comment

Friday, 19 September 2008

This is very nice, exept that it only works with "list" menu. Does anybody knows how to get it work with " Legacy - Flat List"?
Kenja makes this comment

Saturday, 23 August 2008

This looks like exactly what I need. However, when I try to implement this on the rhuk_milkyway template, it doesn't let me limit the menu to the first tier topics. It puts all of the sub-topics in the top menu. It works if I change the menu style to "List" from "Legacy - Flat List", but unfortunately that breaks the menu highlighting. Anyone have any idea how to fix that???
Me makes this comment

Thursday, 21 August 2008

Very clear explanation, I was really wondering how to perform this... Now I just have one single menu to manage and update, and two related modules that display the split menu on top and left positions. Thank you so much!
Elsa makes this comment

Monday, 04 August 2008

I am having some problems with the tutorial. I managed to set everything up correctly but for some reason the sub-menus show up not only on the left menu but at the end of the top menu. Any ideas what I have done wrong? Check out www.hardballbusiness.com and click on services to show the sub menu. You will also see these items on the top. Also, does anyone know any tutorials to style the menus? I want to have some background images and also see if the selected top item can stay highlighted. THanks!
casey makes this comment

Friday, 18 July 2008

This is a great tutorial. Thanks! My question would be: Is there any PHP logic that would query Joomla! for pages where sub menu items exist??? if $this->count modules 'left' && menu_level==2 This way the module would no render on pages where there are no items.
bigmudcake makes this comment

Tuesday, 24 June 2008

The top menu must be type "list" not "Legacy - Flat List" otherwise all menu items are displayed and the end level seems to be ignored. This was my experience in Joomla v1.5.3 Be careful since for some reason the default sample data has some menus set to legacy.
Synaptein makes this comment

Friday, 20 June 2008

Great article. I couldn't get it to work with the first menu set at 1&1 but it works with 0&1 (like the screenshots show). A problem I'm having though, is that the parent of a selected child item won't be highlighted. Is there any simple way to have both the selected child and parent highlighted?
Debra makes this comment

Sunday, 08 June 2008

I've been looking for this trick for days!! I was just about to dig into extended menu also and try to make it do what this tip has done. Excellent!
REllo makes this comment

Thursday, 08 May 2008

nice comment componenet :)
Mauricio makes this comment

Friday, 02 May 2008

Bueno modulo joomla
ted makes this comment

Friday, 02 May 2008

Thanks for such a great ext.
Andrii makes this comment

Thursday, 01 May 2008

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.
soundbite makes this comment

Thursday, 01 May 2008

Looks interesting. Would like to know what templates are available for it.
Zorak makes this comment

Wednesday, 30 April 2008

Good extension!
Kim Brebach makes this comment

Wednesday, 09 April 2008

Hey this is a fundamental improvement from a developer, administrator and client satisfaction POV. Awesome that its core. Awesome.
Sundar makes this comment

Wednesday, 19 March 2008

You are a dude! This is very cool and works great! Thanks for sharing, I was having some strange problems setting up a split menu and this is ace and simple way of doing it.
jimb0 makes this comment

Friday, 07 March 2008

This may just save my life, thanks for this. I was using the extended menu component, but this looks like it will work better. Good Tip.