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)
}
}
}
Code: Select all
<?php JHTML::script('accordionmenu.js', 'templates/'.$this->template.'/js/', true); ?>
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>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
Regards
