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

  • Print
  • Email
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
  1. 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
  2. You are a lifesaver man... great tip
  3. Dan Walker in order to validate you must a Menu Class Suffix to your menus modules so you wont repeat the double id issue
  4. 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.
  5. 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.
  6. Mate it is awesome, you just saved me million hours of making menu. Cheers
  7. 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.
  8. 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.
  9. Wow, great article! It's always nice to find exactly what you're looking for. THANK YOU!
  10. 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.
  11. 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?
  12. 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.
  13. Thanks a lot for at great article, Andrew Eddie.
  14. Well done! This is exactly what I've been looking for - this has saved LOADS of work. Many thanks!
  15. 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?
  16. This is very nice, exept that it only works with "list" menu. Does anybody knows how to get it work with " Legacy - Flat List"?
  17. 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???
  18. 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!
  19. 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!
  20. 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.
  21. 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.
  22. 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?
  23. 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!
  24. nice comment componenet :)
  25. Bueno modulo joomla
  26. Thanks for such a great ext.
  27. 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.
  28. Looks interesting. Would like to know what templates are available for it.
  29. Good extension!
  30. Hey this is a fundamental improvement from a developer, administrator and client satisfaction POV. Awesome that its core. Awesome.
  31. 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.
  32. 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.

Add Comment