The DJ-MultiTreeMenu module allows you to display a horizontal menu in a module position with multi level tree submenu.
What is more - submenu is expandable by using mootools effects, which you can set at module parameters.
Navigate Extensions → Module Manager and choose DJ-MultiTreeMenu module.
Let's take a look at Module Parameters:
- Menu name – choose the name of menu (default is mainmenu)
Navigate to Menus → Menu Manager
- Number of columns – enter a number of columns you want to display in submenu
- Submenu to right from id – enter an id of parent menu item (see the screenshot below), from which submenu should be aligned to right site of parent item; use it if your menu is long and last submenu is displayed outside of your website's container; this parameter is optional; leave unchanged or eneter 0 to display all submenus from left site.
To get a menu item id, navigate: Menus → Your menu name
See an example:
- Show submenus – show/hide drop-down submenu
- Include default css – if you want to change menu CSS styling, change this parameter to 'No' and copy djmultitreemenu.css and djmultitreemenu_fx.css files from /modules/mod_djmultitreemenu/assets/css/ into /templates/[your_template]/css/. Then you may change font sizes, colors, backgrounds, etc. of DJ-MultiTree Menu elements. The only difference between djmultitreemenu.css and djmultitreemenu_fx.css is replacement of all occurences of 'li:hover' (djmultitreemenu.css) with 'li.hover' (djmultitreemenu_fx.css)
- Enable Effects - if Yes, submenus will be showing and hiding with nice mootools effects. Requirements: Joomla! 1.5.19+ , enabled 'System - Mootools Upgrade' plugin (available since Joomla! 1.5.19 as core plugin)
- Show submenus tree - show/hide/show on mouse over submenus from second level. This param is matter only if mootools effects are enabled
- Display SELECT for small screens - display SELECT Dropdown box instead of DJ-MultiTree Menu for devices with small screen (narrower than 960px)
Let's take a look at Module Advanced Parameters:
- Vertical transition - enable vertical transition of submenu at first level. You can mix vertical, horizontal and fade transition as you want
- Horizontal transition - enable horizontal transition of submenu at first level. You can mix vertical, horizontal and fade transition as you want
- Fade effect - enable fade transition of submenu at first level. You can mix vertical, horizontal and fade transition as you want
- Tansition effect – choose the transition effect type
- Effect duation - set effect duration time in miliseconds (1000 ms = 1 second)
- Delay time before close submenu - set delay time in miliseconds (1000 ms = 1 second)
Remember to publish System – Mootools Upgrade plugin to get mootools effects work properly.
Navigate to Extensions > Plugin Manager and check if the plugin is published.
Joomla! 1.5.19+ (plugin is available since Joomla! 1.5.19 as core plugin)