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:

  1. Install the module
  2. Go to your Module Manager and select the “Accordion Menu” module
  3. On the right select the menu you want to display where it says “Menu Name”
  4. 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:

  1. Check to make sure Javascript is turned on.
  2. Use the Firebug or Web Developer extension and see if the error is obvious.
  3. 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

Cassie
16 July 2008

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!

Cassie
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!

Dennie
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?

lily64
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.

Simon
1 August 2008

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.

Jim
2 August 2008

@Simon: This seems to be caused by the jquery on the page script messing up other javascripts. See more information at http://www.dynamicdrive.com/forums/archive/index.php/t-30501.html.

Lex
5 August 2008

Hello. I have the same problem as lily64. Menus won’t collapse. Any ideas. Thank you.

Brian
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?

Jim
6 August 2008

@Lex: You’ll need to show me an example.

@Brian: You should be able to style the menu any way you like using CSS.

Brian
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.

Jim
6 August 2008

You just put it in your own CSS file (for your template). I purposely made the module to be very simple, thus it does not have a CSS file of its own.

Mcometa
13 August 2008

Thanks for this one! You’re a saver.~

Ian Tindale
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(

Jim
14 August 2008

@Ian: I’ve added a troubleshooting section above. Please try step number three. Alternatively, you can disable other modules, etc., and see if that makes mod_accordionmenu work. Once you have identified the conflict you can then resolve it.

Mike
15 August 2008

So, Is there any way to make it collapsed when the mouse is no longer hovering the menu ?

Caleb
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!

Jim
15 August 2008

@Caleb: That would be a very useful feature, indeed. In fact, there are obviously a lot of Javascript options that could be implemented. Unfortunately I’m no wiz at Javascript (ah72 wrote the original script for this), so it’s going to take me a bit to implement them.

Mcometa
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!

Jim
22 August 2008

@Mcometa: Try the Firefox Web Developer extension (https://addons.mozilla.org/en-US/firefox/addon/60). Once installed choose Outline->Outline Current Element and hover over the menu. I’m guessing it is your CSS, but can’t be positive without actually seeing the code.

Simon
6 September 2008

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

Simon Shah
8 September 2008

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

James
9 September 2008

@Simon: The expand/contract images are just for looks. If you don’t want them, just turn off the option and it will still work fine. As far as the correct image path, I’ll look into that when I get a chance, but it might not be for a while. For the moment I’ll add it to the bug tracker.

Cheers, James

Mr.Fresh
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

Simon Shah
15 September 2008

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

Ben Brown
29 September 2008

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!

billisss
15 October 2008

how can I style the submenus on accordion to be different than the parent menus?
thanks

James
19 October 2008

@Ben: I’m not sure, let me know if you figure anything out. Sorry about the late reply.

@billiss: Use CSS. “.accordionMenu ul li ul li” should do it.

Teo
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

Dennis de Goede
7 November 2008

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

Kelsey
9 November 2008

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

shootdatarget
24 November 2008

thx man it’s really help ^_^

Kirsten Langholz
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.

Tim
26 November 2008

Menu will not collapse once expanded. I’ve looked for an answer above but have not found one. Can you help?

Peter
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.

Asle
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?

James
11 December 2008

@Peter: Good fix, I’ll implement that.
@Asle: You have to disable the normal menu (just mod_menu) if you only want the accordion one.

uli
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

Raf
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.

jeferrer
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!

Leave a comment