[TUT] How to add accordion menus to your template

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
ah72
Joomla! Explorer
Joomla! Explorer
Posts: 290
Joined: Sat Mar 15, 2008 9:43 pm
Contact:

[TUT] How to add accordion menus to your template

Post by ah72 » Thu Jul 03, 2008 7:05 pm

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
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

 
jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Tue Jul 08, 2008 12:27 am

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.

ah72
Joomla! Explorer
Joomla! Explorer
Posts: 290
Joined: Sat Mar 15, 2008 9:43 pm
Contact:

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

Post by ah72 » Tue Jul 08, 2008 7:47 am

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
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Tue Jul 08, 2008 12:17 pm

Ah, good catch. I had it hard coded for my setup.

jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Wed Jul 09, 2008 12:33 pm

Duly updated and released v .2.

jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Fri Jul 18, 2008 12:43 am

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.

ah72
Joomla! Explorer
Joomla! Explorer
Posts: 290
Joined: Sat Mar 15, 2008 9:43 pm
Contact:

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

Post by ah72 » Fri Jul 18, 2008 7:55 am

Thanks for the great efforts jfrank!
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

arnel_cagatin
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Thu Jul 10, 2008 1:59 am

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

Post by arnel_cagatin » Thu Aug 07, 2008 2:51 am

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

ah72
Joomla! Explorer
Joomla! Explorer
Posts: 290
Joined: Sat Mar 15, 2008 9:43 pm
Contact:

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

Post by ah72 » Thu Aug 07, 2008 6:16 pm

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
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Thu Aug 07, 2008 7:55 pm

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.

Heilong
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Sun Jul 13, 2008 10:03 am

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

Post by Heilong » Fri Aug 08, 2008 10:16 am

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,

mcometa
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Aug 12, 2008 4:45 am

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

Post by mcometa » Tue Aug 12, 2008 12:02 pm

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~

User avatar
juanparati
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 123
Joined: Thu Nov 08, 2007 6:00 pm
Location: Aarhus (Denmark)

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

Post by juanparati » Thu Aug 21, 2008 10:25 am

Nice work!

kadded
Joomla! Explorer
Joomla! Explorer
Posts: 306
Joined: Sun Mar 23, 2008 9:54 pm

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

Post by kadded » Fri Aug 22, 2008 10:49 am

Is this accordion menu still downloadable?

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

Gergo Erdosi
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4031
Joined: Sat Nov 11, 2006 9:34 pm
Location: Hungary

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

Post by Gergo Erdosi » Fri Aug 22, 2008 10:55 am

To the author, could you please add it to the docs site?
http://docs.joomla.org/Category:Tips_and_tricks

jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Fri Aug 22, 2008 10:58 am

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!
Last edited by jfrank on Fri Aug 22, 2008 11:18 am, edited 1 time in total.

kadded
Joomla! Explorer
Joomla! Explorer
Posts: 306
Joined: Sun Mar 23, 2008 9:54 pm

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

Post by kadded » Fri Aug 22, 2008 11:04 am

Sure, no problem at all. Thanks for the effort in the first place!

kadded
Joomla! Explorer
Joomla! Explorer
Posts: 306
Joined: Sun Mar 23, 2008 9:54 pm

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

Post by kadded » Sat Aug 23, 2008 6:21 am

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.

jfrank
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Thu May 22, 2008 12:34 pm

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

Post by jfrank » Thu Sep 11, 2008 2:29 pm

Seems to still be some trouble with the link. New link available at: http://jamesfrank.info/development/joom ... dion-menu/

johnst
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Oct 20, 2008 7:52 am

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

Post by johnst » Mon Oct 20, 2008 8:07 am

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

User avatar
M4rc0
Joomla! Explorer
Joomla! Explorer
Posts: 311
Joined: Wed Sep 27, 2006 1:47 pm
Contact:

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

Post by M4rc0 » Fri Oct 31, 2008 10:58 am

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!

User avatar
Density5
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Thu Oct 20, 2005 8:37 pm
Location: Milton Keynes, England
Contact:

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

Post by Density5 » Wed Nov 05, 2008 11:58 am

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
You do not throw rocks at a man with a machine gun!

ivy10
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jan 23, 2009 2:43 am

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

Post by ivy10 » Fri Jan 23, 2009 2:48 am

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.

User avatar
Kampp
Joomla! Guru
Joomla! Guru
Posts: 563
Joined: Tue Aug 30, 2005 9:18 am
Location: Denmark
Contact:

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

Post by Kampp » Sat Mar 21, 2009 4:52 pm

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?
http://www.toolmaster.dk - Danish Joomla Services!

Norguad
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Sep 22, 2007 8:21 am

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

Post by Norguad » Tue Jan 05, 2010 4:57 pm

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.

Norguad
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Sep 22, 2007 8:21 am

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

Post by Norguad » Thu Jan 07, 2010 11:14 am

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. :)

User avatar
coredesign
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Tue Nov 15, 2005 2:29 am
Location: Toronto
Contact:

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

Post by coredesign » Tue Jan 19, 2010 7:14 pm

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.

Norguad
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Sat Sep 22, 2007 8:21 am

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

Post by Norguad » Tue Jan 26, 2010 11:05 pm

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 :)

tkedmond
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Jan 10, 2011 3:58 am

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

Post by tkedmond » Tue Jan 25, 2011 7:00 pm

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?
Last edited by tkedmond on Wed Jan 26, 2011 4:55 am, edited 1 time in total.

ilovecyy
I've been banned!
Posts: 1
Joined: Wed Jan 26, 2011 2:19 am

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

Post by ilovecyy » Wed Jan 26, 2011 2:25 am

really a good tut

 

Locked

Return to “Templates for Joomla! 1.5”