Page 1 of 2

[TUT] How to add accordion menus to your template

Posted: Thu Jul 03, 2008 7:05 pm
by ah72
Hello all,

I made a script to add mootools accordion effect to vertical menus in joomla, and wanted to share it with you, here's how to do this:

Save following code in a file "/templates/your_template/js/accordionmenu.js"

Code: Select all

/*
 * AccordionMenu - mootools accordion menu
 *
 * Usage: From "Joomla admin panel >> Module Manager >> under Module Advanced Parameters" assign a "Menu Tag ID" for your menu. Under "Module Parameters" set "Always show sub-menu Items" to "yes"
 *
 * Use the previous id as first argument for function accordionMenu()
 *
 * Example:
 * 
 * insert following code in the head section of the template index.php
 * 
<script type="text/javascript">
window.addEvent('domready', function(){
accordionMenu(
	"mainmenu", // Menu Tag ID (this id is assigned to menu parent ul tag)
	"<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/expand.png", //path to image used to expand menu item
	"<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/collapse.png", //path to image used to collapse menu item
	{duration:400, transition:Fx.Transitions.Quart.easeOut}, // (optional argument) custom accordion options to override defaults, use null if you want to set next argument without changing this
	700 // (optional argument) hover delay in milliseconds over "parent menu item" to open its sublevels, default is 500
);

accordionMenu(
	"resources"
	"<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/expand.png",
	"<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/collapse.png"
);

accordionMenu(
	"keyconcepts"
	"<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/expand.png",
	"<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/collapse.png",
	null,
	1000
);

});
</script>
 *
 * Use CSS to style menu items for different levels
 * 
 * v1.0 - by ah72, July 2008
 *
 */


function accordionMenu(menuId, srcExpandImage, srcCollapseImage, accOptions, accHoverDelay) {
if($(menuId)){

    // getting accordion parent items ("li" tags with class "parent")
    $(menuId).accParentItems = [];

    for(var i = 0; i < $(menuId).childNodes.length; i++) {

        if($(menuId).childNodes[i].className.indexOf('parent') >= 0){
            $(menuId).accParentItems.push($(menuId).childNodes[i]);
        }
    }


    $(menuId).accTogglers = [];
    $(menuId).accElements = [];
    var startItem = -1;

    for(var i = 0; i < $(menuId).accParentItems.length; i++) {

        // creating accordion togglers
        var accToggler = document.createElement("img");

        accToggler.setAttribute("title","Expand");
        accToggler.setAttribute("src",srcExpandImage);

        $(menuId).accParentItems[i].insertBefore(accToggler, $(menuId).accParentItems[i].firstChild);

        $(menuId).accTogglers.push(accToggler);

        // accordion elements
        $(menuId).accElements.push($(menuId).accParentItems[i].getElementsByTagName('ul')[0]);

        // searching for active menu item to make the accordion show its sub-items when page loads
        if ( $(menuId).accParentItems[i].className.indexOf('active') >= 0 ) {
            startItem = i;
        }
   }

    //create our Accordion instance
    if ( $(menuId).accParentItems.length > 0 ){
        $(menuId).Accordion = new Accordion($(menuId).accTogglers, $(menuId).accElements, $merge({
            opacity: false,
            alwaysHide: true,
            show: startItem,
            duration: 600,
            transition: Fx.Transitions.Bounce.easeOut,

            onActive: function(toggler, element){
                element.parentNode.parentNode.setStyle('height', 'auto');
                toggler.setAttribute("src", srcCollapseImage);
                toggler.setAttribute("title","Collapse");
            },
            onBackground: function(toggler, element){
                element.parentNode.parentNode.setStyle('height', 'auto');
                element.setStyle('height', element.offsetHeight+'px');
                toggler.setAttribute("src", srcExpandImage);
                toggler.setAttribute("title","Expand");
            }

            }, accOptions)

        );
    }

    accTimer = null;
    if (!accHoverDelay) var accHoverDelay = 500;

    for(var i = 0; i < $(menuId).accParentItems.length; i++) {

        eval("function accOnclickFunc(){return function(){ if( $('"+menuId+"').accElements["+i+"].style.height == '0px' ) { $('"+menuId+"').Accordion.display("+i+") }}}");
        eval("function accOnMouseoverFunc(){return function(){if( $('"+menuId+"').accElements["+i+"].style.height == '0px' ){accTimer = $('"+menuId+"').Accordion.display.delay("+accHoverDelay+", $('"+menuId+"').Accordion, "+i+");}}}");
        eval("function accOnmouseoutFunc(){return function(){if($defined(accTimer)){$clear(accTimer);}}}");

        $(menuId).accParentItems[i].firstChild.nextSibling.onclick = accOnclickFunc();
        $(menuId).accParentItems[i].firstChild.nextSibling.onmouseover = accOnMouseoverFunc();
        $(menuId).accParentItems[i].firstChild.nextSibling.onmouseout = accOnmouseoutFunc();
    }


    for(var i = 0; i < $(menuId).accElements.length; i++) {
        $(menuId).accElements[i].setAttribute('id', menuId+'_'+i);
        accordionMenu(menuId+'_'+i, srcExpandImage, srcCollapseImage, accOptions, accHoverDelay)
    }

}
}

Add this to the head section of "/templates/your_template/index.php" (this will load accordionmenu.js)

Code: Select all

<?php JHTML::script('accordionmenu.js', 'templates/'.$this->template.'/js/', true); ?>
from "Joomla admin panel >> Module Manager >> under Module Advanced Parameters" assign a "Menu Tag ID" for your menu. Under "Module Parameters" set "Always show sub-menu Items" to "yes". Use the previous id as first argument for function accordionMenu()

Example:
following example code goes in the head section of the template index.php

Code: Select all

<script type="text/javascript">
window.addEvent('domready', function(){
accordionMenu(
    "mainmenu", // Menu Tag ID (this id is assigned to menu parent ul tag)
    "<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/expand.png", //path to image used to expand menu item
    "<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/collapse.png", //path to image used to collapse menu item
    {duration:400, transition:Fx.Transitions.Quart.easeOut}, // (optional argument) custom accordion options to override defaults, use null if you want to set next argument without changing this
    700 // (optional argument) hover delay in milliseconds over "parent menu item" to open its sublevels, default is 500
);

});
</script>
Now you might need some css to style menu items for different menu levels

Features :
  • Menu sublevels supported, the accordionMenu() function is called recursively until the last level
  • Menu sublevels can be opened by hovering on the parent item, a hover delay is added to make the accordion user friendly
  • All accordion options can be set via function arguments
Hope it's useful

Regards

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jul 08, 2008 12:27 am
by jfrank
I've used ah72's script to create a simple module that does the same thing. You can find it at http://dev.smidg.in/accordionmenu.

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jul 08, 2008 7:47 am
by ah72
Hello jfrank,

That's great work! it'll make life easier for non-coders

Just a small typo in file "mod_accordionmenu/tmpl/default.php" lines 15 and 16:

should read

Code: Select all

    $expand_img = "modules/mod_accordionmenu/assets/plus.gif";
    $contract_img = "modules/mod_accordionmenu/assets/minus.gif"; 
instead of

Code: Select all

    $expand_img = "/joomla/modules/mod_accordionmenu/assets/plus.gif";
    $contract_img = "/joomla/modules/mod_accordionmenu/assets/minus.gif"; 
Regards

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jul 08, 2008 12:17 pm
by jfrank
Ah, good catch. I had it hard coded for my setup.

Re: [TUT] How to add accordion menus to your template

Posted: Wed Jul 09, 2008 12:33 pm
by jfrank
Duly updated and released v .2.

Re: [TUT] How to add accordion menus to your template

Posted: Fri Jul 18, 2008 12:43 am
by jfrank
Now at v.3. Caught another bug when there were registered-only menu items under a public menu item. Moved hosting to new page: http://smidg.in/development/joomla/accordion-menu.

Re: [TUT] How to add accordion menus to your template

Posted: Fri Jul 18, 2008 7:55 am
by ah72
Thanks for the great efforts jfrank!

Re: [TUT] How to add accordion menus to your template

Posted: Thu Aug 07, 2008 2:51 am
by arnel_cagatin
hi,

im new to joomla and dont know much in CSS. I have used the accordion menu module and i have a lil problem.
the submenu appear at the left side of the mainmenu when i hover at the parent and it wont hide back when i took my mousepointer off. Can you tell me what to do?

You can check the problem at sccpag.edu.ph

Re: [TUT] How to add accordion menus to your template

Posted: Thu Aug 07, 2008 6:16 pm
by ah72
Hello,
arnel_cagatin wrote:the submenu appear at the left side of the mainmenu
can you provide a link to a page in your site with the accordion menu
arnel_cagatin wrote:it wont hide back when i took my mousepointer off
this accordion menu was designed to work like this, you can hide the submenu by clicking on the "minus.gif" image.

Regards

Re: [TUT] How to add accordion menus to your template

Posted: Thu Aug 07, 2008 7:55 pm
by jfrank
Depending on the options enabled in the module this may or may not have the minus. I have had several other people report this problem, but so far no one has given me a link to a page where I can actually see it.

If you only have menu item with other menu items under it then the menu will not collapse unless you click the "minus" gif (make sure you have images enabled). If you have multiple parent-items with children, then the menu should collapse when you move to a different parent item.

Please provide us with a direct link.

Re: [TUT] How to add accordion menus to your template

Posted: Fri Aug 08, 2008 10:16 am
by Heilong
Hi everyone,

Is there any way to customise this menu to have a background image behind the menu title, also have a border at the bottom only for some menu.

Actually, I see the code generated and there is no way to customise each title background differently.

Bye,

Re: [TUT] How to add accordion menus to your template

Posted: Tue Aug 12, 2008 12:02 pm
by mcometa
oh god! thank you for this one! I have found what i've been looking for!

---

ps,

it seems that it works only if you hover on a menu item. is there anything i could do to make it like 'onClick'? howto please? Thanks~

Re: [TUT] How to add accordion menus to your template

Posted: Thu Aug 21, 2008 10:25 am
by juanparati
Nice work!

Re: [TUT] How to add accordion menus to your template

Posted: Fri Aug 22, 2008 10:49 am
by kadded
Is this accordion menu still downloadable?

The website hosting of jfrank it seems to be down. Many thanks.

Re: [TUT] How to add accordion menus to your template

Posted: Fri Aug 22, 2008 10:55 am
by Gergo Erdosi
To the author, could you please add it to the docs site?
http://docs.joomla.org/Category:Tips_and_tricks

Re: [TUT] How to add accordion menus to your template

Posted: Fri Aug 22, 2008 10:58 am
by jfrank
Server experiencing technical difficulties. I've brought it back up enough to provide the downloads. Will fix further this weekend and may move the downloads to joomlacode. Enjoy!

Re: [TUT] How to add accordion menus to your template

Posted: Fri Aug 22, 2008 11:04 am
by kadded
Sure, no problem at all. Thanks for the effort in the first place!

Re: [TUT] How to add accordion menus to your template

Posted: Sat Aug 23, 2008 6:21 am
by kadded
The accordion menu seem to expand all levels when hovering over. I do not mind about the hovering over, but would prefer to control the expanding for the different submenu's. It's not the biggest problem ever, but it nevertheless would be cool to 'hide' the second level items until one hovers over.

Overall, this is a great component for those not into coding. Can't thank you guys enough.

Re: [TUT] How to add accordion menus to your template

Posted: Thu Sep 11, 2008 2:29 pm
by jfrank
Seems to still be some trouble with the link. New link available at: http://jamesfrank.info/development/joom ... dion-menu/

Re: [TUT] How to add accordion menus to your template

Posted: Mon Oct 20, 2008 8:07 am
by johnst
Hi,

"Notice: Undefined variable: image in XXXXXXX\modules\mod_accordionmenu\helper.php on line 312"

What does it mean ?
I tried everything you wrote... javascript, firebug, even reinstalling joomla...
but there is still this warning instead of the menu.

I use Joomla 1.5.7 and the base-template.

If someone have an idea, because there is nothing on the web...

PLEAAASE !! :D

Re: [TUT] How to add accordion menus to your template

Posted: Fri Oct 31, 2008 10:58 am
by M4rc0
Wow!

Nice job!

Thank you very much for the module!

Keep up the good work, this forum makes joomla the best CMS :D

johnst,
- Did you get the module from the link above your post?
- Do you have javascript enabled?
- I would try a fresh joomla install with the module and check it in a different computer/browser.
Good Luck!

Re: [TUT] How to add accordion menus to your template

Posted: Wed Nov 05, 2008 11:58 am
by Density5
johnst wrote:Hi,

"Notice: Undefined variable: image in XXXXXXX\modules\mod_accordionmenu\helper.php on line 312"

What does it mean ?
I tried everything you wrote... javascript, firebug, even reinstalling joomla...
but there is still this warning instead of the menu.

I use Joomla 1.5.7 and the base-template.

If someone have an idea, because there is nothing on the web...

PLEAAASE !! :D
Johnst fyi this is on the bug tracker @ http://joomlacode.org/gf/project/accord ... m_id=12520

Re: [TUT] How to add accordion menus to your template

Posted: Fri Jan 23, 2009 2:48 am
by ivy10
Hi. thanks for this, cool menu and instructions, but how do I find the css file to change the style? I'd like to do simple things like 'bold' the text and block colour for the background of the parent menu items but I just cant find the css on it. Can anyone point me in the right direction please? Much appreciated by very frusterated newbie to accordion menu css.

Re: [TUT] How to add accordion menus to your template

Posted: Sat Mar 21, 2009 4:52 pm
by Kampp
Excellent module!

I get one JavaScript error resulting in the menu not collapsing on load, so that it does not work. This ONLY happens when viewing the page with Fireboard Forum on the homepage and not any other pages. In other words - it must be a variable conflict?

The error is:

Code: Select all

Error: $(menuId).childNodes is undefined
Source: /modules/mod_accordionmenu/assets/accordionmenu.js
Line: 17
Any thoughts?

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jan 05, 2010 4:57 pm
by Norguad
Hi,

I have a problem, I cant solve at the moment and would be very happy, if someone can help me.

I am not very familiar with mootools.

The problem is:

For my menu items I use bullets using css - "background: url(../images/image.png) 6px 4px;"

Images included in this solution are added only to expandable items, but I need, that all my menu items have those custom bullets and when I click on the menu item and the menu item is expandable, the bullet changes to "background: url(../images/image.png) 6px 4px;"

I added "element.parentNode.setAttribute("class", "switch-image");" to the code after "onActive: function(toggler, element)" and also added swich-image class to the css.

1. It works well in FF, Safari, Chrome and even IE8, but IE7 does not load the new class, it completely ignores it - do anybody know why?
2. (not so important, but still would be fine to solve) the command removes all other classes and replace it with only "switch-class" class - how to make it, that it adds the class to all others.

Thank you very much for your ideas.

Re: [TUT] How to add accordion menus to your template

Posted: Thu Jan 07, 2010 11:14 am
by Norguad
Norguad wrote:Hi,

I have a problem, I cant solve at the moment and would be very happy, if someone can help me.

I am not very familiar with mootools.

The problem is:

For my menu items I use bullets using css - "background: url(../images/image.png) 6px 4px;"

Images included in this solution are added only to expandable items, but I need, that all my menu items have those custom bullets and when I click on the menu item and the menu item is expandable, the bullet changes to "background: url(../images/image.png) 6px 4px;"

I added "element.parentNode.setAttribute("class", "switch-image");" to the code after "onActive: function(toggler, element)" and also added swich-image class to the css.

1. It works well in FF, Safari, Chrome and even IE8, but IE7 does not load the new class, it completely ignores it - do anybody know why?
2. (not so important, but still would be fine to solve) the command removes all other classes and replace it with only "switch-class" class - how to make it, that it adds the class to all others.

Thank you very much for your ideas.
Ok. Solved it. :)

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jan 19, 2010 7:14 pm
by coredesign
It would be VERY helpful if you would share your solution here. It can be very frustrating to google a topic, find a forum posting that shares the same question, only to have the thread end with "Solved it!" and no solution shared.

Just a thought.

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jan 26, 2010 11:05 pm
by Norguad
coredesign wrote:It would be VERY helpful if you would share your solution here. It can be very frustrating to google a topic, find a forum posting that shares the same question, only to have the thread end with "Solved it!" and no solution shared.

Just a thought.
Hello,

my solution isnt maybe very elegant, but it is running without problems.

So here is my solution step by step:
1.
Add to your template.css a new style
.switch-image {
background-image: url(<image - that shall be shown after opening the menu>);
}

2.
mod_accordionmenu/assets/

--> make a copy of accordionmenu.js and name it for example accordionmenu-ie7.js

3.
mod_accordionmenu/assets/

--> edit accordionmenu.js
find line:

Code: Select all

onActive: function(toggler, element){
and add after:

Code: Select all

element.parentNode.setAttribute("class", "switch-image active");
find line:

Code: Select all

onBackground: function(toggler, element){
and add after:

Code: Select all

element.parentNode.setAttribute("class", "parent");
4.
mod_accordionmenu/assets/

--> edit accordionmenu-ie7.js
find line:

Code: Select all

onActive: function(toggler, element){
and add after:

Code: Select all

element.parentNode.setAttribute("className", "switch-image active");
find line:

Code: Select all

onBackground: function(toggler, element){
and add after:

Code: Select all

element.parentNode.setAttribute("className", "parent");
5.
mod_accordionmenu/

--> edit mod_accordionmenu.php
find lines:

Code: Select all

$document =& JFactory::getDocument();
JHTML::script('accordionmenu.js', 'modules/mod_accordionmenu/assets/', true);
replace with:

Code: Select all

jimport('joomla.environment.browser');
$browser = JBrowser::getInstance();
$name = $browser->getBrowser();
$bversion = $browser->getVersion();

$document =& JFactory::getDocument();
if (($name == 'msie') && ($bversion == 7.0))
{
  JHTML::script('accordionmenu-ie7.js', 'modules/mod_accordionmenu/assets/', true);
  } else {
  JHTML::script('accordionmenu.js', 'modules/mod_accordionmenu/assets/', true);
}
And now upload all modified files to your Joomla instalation.

Everything else is then made with css.

Hope it works for you as it is working for me :)

Re: [TUT] How to add accordion menus to your template

Posted: Tue Jan 25, 2011 7:00 pm
by tkedmond
I tried this with Joomla 1.6 and got this error on line 9:

Code: Select all

$(menuId).childNodes[i].className is undefined
This is line 9:

Code: Select all

if($(menuId).childNodes[i].className.indexOf('parent') >= 0){
Any thought?

Re: [TUT] How to add accordion menus to your template

Posted: Wed Jan 26, 2011 2:25 am
by ilovecyy
really a good tut