Accordion Menu
This simple module for Joomla! 1.5 creates an accordion menu using unordered lists and the Mootools library. It is based off of the standard mod_mainmenu and a script written by ah72 and shared on the Joomla! forums.
It will automatically create an accordion menu based on nested <ul> tags. Simply define a menu in the Menu Manager that has nested items and then tell mod_accordionmenu to display it.
Current Version: .5
Grab it from http://joomlacode.org/gf/project/accordionmenu/frs/. Version .5 adds an option written in by Dennie to enable/disable menu opening on hover.
You can find this module on the Joomla! Extensions site here. There is also a tracker open for feature requests and bugs.
Installation:
- Install the module
- Go to your Module Manager and select the “Accordion Menu” module
- On the right select the menu you want to display where it says “Menu Name”
- Go look at your new accordion menu
Note:
- Javascript must (of course) be turned on
- There is no styling on the menus
- If you want to run multiple instances of the module, the new instances must have a custom “Menu Tag ID” parameter specified
Troubleshooting:
If the plugin is not working for you, please take these steps first:
- Check to make sure Javascript is turned on.
- Use the Firebug or Web Developer extension and see if the error is obvious.
- Do a fresh install of Joomla! and enable mod_accordionmenu first. Then enable other modules, plugins, and components and see if one of them is breaking mod_accordionmenu.
I have found that it is usually another element of the page that is breaking mod_accordionmenu. Something may be importing an older mootools library, stopping the script from executing, etc. Unfortunately, these are things which I can’t control. If the above steps don’t reveal an answer, feel free to send the problem my way.
39 Comments to Accordion Menu
Thanks for this module. It is exactly what I want for organizing my vertical menus. However, I’m having a problem with menu items linking to components. On a normal content page, the menu behaves properly with the right parent item expanded and the rest closed. But when I click on a menu item for a component, such as “Gallery” or “Contact,” the entire menu expands and all the items are visible. Do you have any suggestions? Feel free to email me. Thank you!
18 July 2008
You are speedy! The Accordion Menu now works flawlessly with all of my menu items. This module is the answer for anyone looking to put a mootools expand-and-collapse effect on their vertical menus. It’s lightweight and you don’t even have to touch the javascript. Fantastic!
22 July 2008
This is exactly what I was looking for (at leas I think it is). However I got a problem when loading the page. The errorconsole of Firefox returns a “Fx.Transitions is undefined” error. Due to this error (I guess) all submenu’s are expanded and no animation is possible.
I’m currently working with joomla 1.5.1, mootools v1.11 (and Legacy plugin is enabled) and the .3 version of the accordionmenu module.
If a look at the HTML-output code I can see that the mootool.js library is imported. However the above mentioned error keeps popping up. How can I resolve this?
25 July 2008
Once menu is expanded, it will not collapse unless page is refreshed or I change pages. J 1.5.4. Any ideas why? I would think it would collapse when you are no longer hovering over it. Thanks for any ideas.
Hi there, this is something I think I really need but just cannot get it to work… it simply won’t expand at all. I’ve uninstalled it byut am happy to give you full access to the site if you can get it to work.
5 August 2008
Hello. I have the same problem as lily64. Menus won’t collapse. Any ideas. Thank you.
6 August 2008
The menu works great but I would like the seperators to be closer together. It’s like they are double spaced and it’s taking up a lot of room. Is there anyway to make the seperators closer?
6 August 2008
I looked for a css file but did not see one. Can you point me in the right direction. Thanks for the quick response.
13 August 2008
Thanks for this one! You’re a saver.~
14 August 2008
It’s not working. Firebug says:
accordionMenu is not defined
(?)()()index.ph…temid=223 (line 81)
returns()()mootools.js (line 21)
returns()(undefined)mootools.js (line 21)
cloneEvents()(function())mootools.js (line 50)
cloneEvents()(”domready”, undefined, undefined)mootools.js (line 50)
parse()()mootools.js (line 59)
returns()()mootools.js (line 21)
returns()()mootools.js (line 21)
[Break on this error] accordionMenu(
15 August 2008
So, Is there any way to make it collapsed when the mouse is no longer hovering the menu ?
15 August 2008
This module is extremely helpful and quite flexible! I had almost no challenge in using css to style my menus exactly as I wanted!
I’m wondering if anyone can assist in modifying the close menu option, so if you are on a page where the second level is already open, and you hover over another level one option, it won’t close the level that is “active”. I don’t mind closing other level twos, but I’d prefer to not close the level two that is active.
Any thoughts are greatly appreciated! And thanks again!
20 August 2008
@Jim: I get this weird problem on my menu layout, i get a weird white space on my menu. Please check this link: http://img172.imageshack.us/img172/1816/weirdzq2.jpg >> is it with my CSS? I just don’t know where to troubleshoot. I get really confused right now. Thanks!
This is a need module and I have it published in the solutions area of the site. However I am not sure where to place the expand/contract images since I have a nested menu structure. Please could you outline what I do. In the admin settings I have activate hovering and expand images enabled. Thanks
Hi Burek
I installed the accordion menu on my Joomla site at http://www.datasherpa.com/index.php/solutions and it works fine apart from the fact that it is not reading the plus and minus images correctly. The problem is that the path to the images is wrong.
It currently reads the path as:
http://www.datasherpa.com/index.php/modules/mod_accordionmenu/assets/minus.gif
Whereas the correct path should read:
http://www.datasherpa.com/modules/mod_accordionmenu/assets/minus.gif
Any help and advice in rectifying this problem would really be appreciated
Thank you
11 September 2008
If you use it for the submenu and there are no items under a mainmenu item, the menu showed up empty
Please, correct this. Thanks
I looked further at the problem. It looks like the expand/contract images work when Joomla SEF is disabled but are not visible when SEF is enabled. This does not look very nice when using IE7 as you see the boxes for the images but no image. I think the expand/contract icons are important since without them, it might be less than intuitive for users to know what they are to do and the fact that, the menu actually expands. For know I have turned the images off but hope that this issue can get resolved. Its a great utility apart from this issue.
Thanks.
Simon
I’m trying to use this module on a website, but am having issues using it in IE6 (http://www.kitlocker.com/derby). I have to make it display correctly in IE6 as this is the standard browser used by the client (yes, its bad, but no option ;-)). Does anyone have any idea why this will not correctly expand, contract and how to go about fixing it.
FYI - no Javascript errors are given, the menu just appears fully expanded, hovering does try to contract but then bounces back to expanding.
Any ideas or suggestions would be greatly appreciated. Great module apart from this!
15 October 2008
how can I style the submenus on accordion to be different than the parent menus?
thanks
3 November 2008
[quote]
@billiss: Use CSS. “.accordionMenu ul li ul li” should do it.
[/quote]
Hi, please tell me where to put the code from above? This code will show each active menu link with a different color?
Thank you
Hey guys,
I’m using this very nice Accordion menu, but i’m having some problems with it. The menu works fine in Mozilla Firefox 3. But when you want to open the website in IE7, all menus are expanded.
This is the site with the problem : http://www.korper.nl/knoops_info/
Does anyone know how to solve this problem?
Thanks,
Dennis
Hi there,
I’m getting an series of errors when I use this module:
Notice: Undefined variable: image in /home/mysite.com.au/www/testbed/modules/mod_accordionmenu/helper.php on line 312
The above is actually displaying on the site.
Looking in Firebug, I also see the following error within window.addEvent(’domready’, function(){
67 accordionMenu(
Notice: Undefined variable: expand_img in /home/mysite.com.au/www/testbed/modules/mod_accordionmenu/tmpl/default.php on line 34
Haven’t been able to figure it out…
71″, //path to image used to expand menu item
24 November 2008
thx man it’s really help ^_^
25 November 2008
First of all I would like to thank you for this great modul. It is exactly what I was looking for.
Unfortunately I am not wise enough to build a set of CSS styles to adjust it to my needs.
Would you please be so kind to help a newbie and set up a simple one just to make me understand what classes and ids are needed.
Your support would be highly appreciated.
Menu will not collapse once expanded. I’ve looked for an answer above but have not found one. Can you help?
26 November 2008
If anyone is having a problem displaying the expand/collapse icon after you go a couple levels deep into your site I did a quick fix in the
C:\Users\Peter\Desktop\mod_accordionmenu_v.5\mod_accordionmenu\tmpl\default.php file.
Current:
$expand_img = “modules/mod_accordionmenu/assets/plus.gif”;
$contract_img = “modules/mod_accordionmenu/assets/minus.gif”;
Should read:
$expand_img = JURI :: base() . “modules/mod_accordionmenu/assets/plus.gif”;
$contract_img = JURI :: base() . “modules/mod_accordionmenu/assets/minus.gif”;
This will give the base URL of the site so it can pick up the image files. When they are clicked it allows you to collapse the menu. I might try working on a hover collapse version of this and update the author.
1 December 2008
Nice accordion menu! Must be my stupidness but I go to the Module Manager and create a new “Accordion menu”. On the menu name I choose a menu but now I get 2 versions of the same menu. First the menu I have published in “Left” and below this the same menu with accordion effect. How do I display only the menu with accordion effect?
12 December 2008
Hello James and Kelsey
Had the same problem like “Kelsey”:
Two solutions:
- change the errorreporting in the php.ini to error_reporting = E_ALL & ~E_NOTICE
- delete .$image in helper.php - it works without this var
My problem:
expanding aint work. local it works, after i load it on my server all submenues where showing.
see: neu.peissnitzhaus.de/joomla157
13 December 2008
The menu is great, but I have a little problem: I’d like it to show the active menu, not the last hovered, when you move the cursor out of the menu. Can you help me?
PS: For people having problems with styles I can recommend a Firefox Web Developer extension with its Display Element Information tool.
21 December 2008
Hi, Thanks for this extension. It’s really helpful. However, it work well with firefox but it’s broken in IE7. is there some fix here? or I missed something. A response will be greatly appreciated. Thanks!
16 July 2008