Accordion Menu

66 Responses to “Accordion Menu”

1. 

   Cassie 16 July 2008 at 21:16 #

   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!
2. 

   Cassie 18 July 2008 at 03:28 #

   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!
3. 

   Dennie 22 July 2008 at 14:00 #

   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?
4. 

   lily64 25 July 2008 at 16:52 #

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

   Simon 1 August 2008 at 20:31 #

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

   Jim 2 August 2008 at 03:50 #

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

   Lex 5 August 2008 at 07:43 #

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

   Brian 6 August 2008 at 12:57 #

   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?
9. 

   Jim 6 August 2008 at 13:10 #

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

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

    Brian 6 August 2008 at 13:16 #

    I looked for a css file but did not see one. Can you point me in the right direction. Thanks for the quick response.
11. 

    Jim 6 August 2008 at 14:13 #

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

    Mcometa 13 August 2008 at 00:55 #

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

    Ian Tindale 14 August 2008 at 01:57 #

    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(
14. 

    Jim 14 August 2008 at 13:48 #

    @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.
15. 

    Mike 15 August 2008 at 03:16 #

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

    Caleb 15 August 2008 at 21:30 #

    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!
17. 

    Jim 15 August 2008 at 21:35 #

    @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.
18. 

    Mcometa 20 August 2008 at 03:19 #

    @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!
19. 

    Jim 22 August 2008 at 19:57 #

    @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.
20. 

    Simon 6 September 2008 at 18:23 #

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

    Simon Shah 8 September 2008 at 12:04 #

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

    James 9 September 2008 at 08:17 #

    @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
23. 

    Mr.Fresh 11 September 2008 at 06:12 #

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

    Simon Shah 15 September 2008 at 04:50 #

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

    Ben Brown 29 September 2008 at 09:45 #

    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!
26. 

    billisss 15 October 2008 at 02:57 #

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

    James 19 October 2008 at 20:19 #

    @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.
28. 

    Teo 3 November 2008 at 05:57 #

    [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
29. 

    Dennis de Goede 7 November 2008 at 11:42 #

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

    Kelsey 9 November 2008 at 05:52 #

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

    shootdatarget 24 November 2008 at 12:20 #

    thx man it’s really help ^_^
32. 

    Kirsten Langholz 25 November 2008 at 20:50 #

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

    Tim 26 November 2008 at 19:15 #

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

    Peter 26 November 2008 at 19:25 #

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

      Ric 13 March 2009 at 09:37 #

      Tried this and got:-

      Warning: Division by zero in /home/xxx/public_html/development/xxxxxxx/modules/mod_accordionmenu/tmpl/default.php on line 47

      Thought I’d let you know..

      Cheers,
35. 

    Asle 1 December 2008 at 16:21 #

    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?
36. 

    James 11 December 2008 at 08:30 #

    @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.
37. 

    uli 12 December 2008 at 12:24 #

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

    Raf 13 December 2008 at 23:13 #

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

    jeferrer 21 December 2008 at 09:24 #

    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!
40. 

    Pbarba 19 January 2009 at 07:13 #

    I have installed the mod and it works great thankyou. However, I have other menus that appear once logged in and I want to apply the accordion to them also. When I copy the mod and assign it to other nav it doesn’t work. It just displays the nav completely extended.Can you help? Thanks
41. 

    brenden 21 January 2009 at 13:22 #

    I really need to know if this supports a three tier menu. ie Menu item 1 > item 1.1 > item 1.1.1 ? How would you go about setting this?
42. 

    ema 25 January 2009 at 18:10 #

    same problem: once menu is expanded, it will not collapse automatically when mouse is far away.
    two solutions are: refresh the page or click on the “minus” icon,in Joomla 1.5.9, no conflict with other module

    Solution?

    ps there is a way to put the + icon at the top of submenu?
    example
    now it appears:

    mainmenu1
    +
    mainmenu2 <- this is the menu item with “hovering”
    submenu1
    submenu2

    how can change it in

    mainmenu1
    mainmenu2
    +
    submenu1
    submenu2

    thank you
43. 

    Jez 4 February 2009 at 10:51 #

    Hi.

    The plug-in is not working at all – it doesn’t even render on the screen. In its place I’m getting the error:

    “Notice: Undefined variable: image in C:\wamp\www\joomla1\modules\mod_accordionmenu\helper.php on line 312″

    I’ve had a quick look at the PHP and it looks like $image is not in fact declared.

    Cheers
44. 

    Jason 5 February 2009 at 18:50 #

    I have the issue with the + and – images. I’d like them to be directly to the left of the menu name rather than right above it..

    current:
    +
    menuname

    what I’d like
    + menuname
45. 

    Ric 13 March 2009 at 09:45 #

    Is it possible to have the menu open on click instead of on hover? My client is asking and this is the only decent accordion menu I can find. You’ve done a great job and it’s all working perfectly on my development site.

    Cheers,
46. 

    Manoj RS 22 March 2009 at 12:28 #

    If you guys need any help playing with the javascript of the menu let me know and @Jason and @ema, its simple css embed using the javascript to make what you are looking for to happen … cheers
    • 

      Jean-Claude 25 April 2009 at 16:50 #

      Can you please elaborate or give and example. Thanjs in advance
47. 

    YomenoCorp 26 March 2009 at 07:26 #

    Hi.
    Accordionmenu doesn’t work on my client site.
    One item of the menu has been trashed and accordionmenu seems doesn’t like it :(
    The website is compromise and that fatal error appear :
    Fatal error: __clone method called on non-object in /home/users5/a/ambchy/www/modules/mod_accordionmenu/helper.php on line 277

    That line seem to be the problem : $menu->getItem($item->query['Itemid']))
    $item->query['Itemid']) return nothing if the item has been trash.

    Regards.
48. 

    kayode 14 April 2009 at 10:16 #

    Hi, Jim, I’m using a custom template and I trying to use this accordion on my homepage. After I added the accordion I only get a link, but i dont want the accordion to link to any web page. I just want it to toggle (like expand and collapse) when clicked upon.

    I have my module setup like this
    and i have positioned the accordion to “ebanking” since that’s what i named the module.

    Also if i want contents inside the accordion how to I go about it. Please I need help. Thanks
49. 

    Anki 21 April 2009 at 20:40 #

    This menu looks good but the menu will not collapse automatically when mouse is far away, any way to do this?
50. 

    Peter_1987 26 April 2009 at 21:26 #

    Hi @ all,

    I am nearly Joomla beginner and I’ve found this great module on my long search for a well done accordion!

    But could somebody please help me out? I am tryin’ to implement full active highlighting via a CSS. But I can’t find out how! Please help!

    Best wishes,

    Peter
51. 

    Richard Varno 30 April 2009 at 22:22 #

    not using this on my own site yet, but for a client.

    for all of the folks that think CSS stands for “cascading scary schtuff” :P (like me) and were looking for an example.

    paste this into your template.css file or add a link to a separate css file in the index.php of your template

    this will give you 2 levels of different colored submenus, there are some IE specific fixes I will post here later after I get them worked out.

    P.S> Thanks for the great menu, it was just what I needed. The only thing I would add is a default css file for the challenged folks like me.

    /** main menu items **/
    ul#accordionMenu li a span{
    font-weight: bold;
    font-size: 100%;
    text-align: center;
    text-decoration: none;
    width:150px;
    height:20px;
    margin: 5px;
    border: 1px solid black;
    display: block;
    vertical-align: middle;
    background-color: #99FF99;
    color: black;
    }

    ul#accordionMenu li a span:hover{
    font-weight: bold;
    font-size: 100%;
    text-align: center;
    text-decoration: none;
    width:150px;
    height:20px;
    margin: 5px;
    display: block;
    border: 1px solid black;
    vertical-align: middle;
    background-color: white;
    color: black;
    }

    /** sub menu items **/
    ul#accordionMenu li ul li a span {
    font-weight: normal;
    font-size: 100%;
    text-align: center;
    text-decoration: none;
    width:150px;
    height:20px;
    margin: 5px;
    display: block;
    border: 1px solid black;
    vertical-align: middle;
    background-color: #AAFFAA;
    color: black;
    }

    ul#accordionMenu li ul li a span:hover {
    font-weight: normal;
    font-size: 100%;
    text-align: center;
    text-decoration: none;
    width:150px;
    height:20px;
    margin: 5px;
    display: block;
    border: 1px solid black;
    vertical-align: middle;
    background-color: white;
    color: black;
    }
52. 

    Charles 13 May 2009 at 23:16 #

    Hi,

    This accordion menu does not work if the menu has 3 levels. Is this supposed?

    Regards.
53. 

    Serena 19 May 2009 at 00:15 #

    Hi, I’m getting this message shown in my browser screen and I’ve noticed other people have had the same problem. Has anyone found a fix to it, or know what it means?

    Notice: Undefined variable: image in /Library/WebServer/joomla/modules/mod_accordionmenu/helper.php on line 312

    I have Show images as no.

    Cheers
54. 

    Morgana 20 May 2009 at 09:54 #

    Hi James ,
    I am trying to use accordion Menu to display a 3 tiered menu …
    It seems that it may not be compatible with IE6 ??? and although it displays closed in IE7
    , will see on the site http://www.acivateart.com.au it displays the 3rd tier of both SHARED and GRANTS (menu items) differently… Can you help?
    Thanks
    Morgana
55. 

    VM 26 May 2009 at 18:47 #

    I’m getting the same “Notice: Undefined variable: image in /(…) /modules/mod_accordionmenu/helper.php on line 312″. Any ideas on how to fix that?
56. 

    nico 5 June 2009 at 08:07 #

    Thank you for these extension.
    Like many, I have a problem on IE7 , the menu is always expanded
    How can I solve this Problem.
    Thank you for answering me
    • 

      Jim 7 June 2009 at 01:40 #

      Unfortunately I’m not really doing anything with this extension anymore. If you find a solution and want me to post it, though, let me know.
57. 

    Richard 24 June 2009 at 21:17 #

    IE SPACING ISSUE FOR mod_accordionMenu

    Fought with this one for a couple of weeks, if you are getting…

    menu item 1

    menu item 2

    menu item 3

    rather than…

    menu item 1
    menu item 2
    menu item 3

    in IE (will work ok in firefox/opera)

    the follow css will fix this problem:

    /** fix ie spacing nonsense **/
    ul#accordionMenu li{
    margin:0 0 0 0;
    display: inline;
    }

    Enjoy!
    • 

      snowfrog 10 July 2009 at 08:04 #

      in IE6 *grrr* the initial state of a item with subitems is expanded. on hover the item collapses and instantly expands again. is this a known issue?

      greets snowfrog
58. 

    Peter 21 July 2009 at 12:15 #

    Hi i have a question about the menu.

    It works fine, but if i click “home” it goes to http://www.holland.com
    but i want it to go to http://www.holland.com/index.php.

    because i have an little intro before you come to the home page

    thanks Peter
59. 

    cagdas 27 July 2009 at 19:54 #

    I’m getting the same “Notice: Undefined variable: image in /(…) /modules/mod_accordionmenu/helper.php on line 312″. Any ideas on how to fix that?
60. 

    cagdas 27 July 2009 at 19:57 #

    I’m getting the same “Notice: Undefined variable: image in /(…) /modules/mod_accordionmenu/helper.php on line 312″. Any ideas on how to fix that?

    http://img228.imageshack.us/img228/3641/rneko.jpg
61. 

    danko 31 July 2009 at 19:04 #

    my problem is that I have the horizontal menu which has a drop-down menu and when I select one of these submenus (drop down), it properly shows the vertical menu on the left side, but the problem is when I select an first item from the main horizontal menu, for example, “Povijest” or “Kultura”, then there is not display left menu. So the drop-down menu above must call a submenu in order to see the left menu.

    ogulin.hr/joomla

    The menus are custom made from MainMenu menu (suckerfish) and above each item has its own menu, which uses mod_accordionmenu. First, I made the basic MainMenu, then I copied it from a section by section (eg section “povijest” with all their submenus) in the new menus. Later I expanded that new menus because they have a lot of the submenu …

    It is interesting that the menu work fine in two sections at the beginning, but after that I changed MainMenu and other menues, and it has disappeared … the modules is all defined good, where should to appear, please help with every ideas
62. 

    danko 1 August 2009 at 18:27 #

    I do not know whether I’m crazy or what, but hopefully the guys that filled more content and further changed it menues, now when you click on “O Gradu”, or “Povijest”, there are now shows the left menu, and when you click on the other menus, such as “Turizam”, or “Ostalo”, left menu is not showing. Also when you clicked on, for example, “O gradu”, which now works well on the top menu it does not stay highlighted, in yellow, and when I click on “Turizam” remains marked and yellow.

    So my question is how to choose when I click main item in the main menu that it reconnect in Item of that specific menu (Any item that is in the top main menu has its own separate menu.). When I select an item from the pull-down of the top main menu it immediately goes into the specific menu because it show the menu in the left, and main menu item does not remain highlighted in yellow.

Comments are closed.