Main Menu Setup

Main Menu Setup Using Joomla Main Menu Module

First, open your Joomla Module Manager and open the Joomla mainmenu module. Next, assign the module to the menubarleft module position. The Main Menu works with the three different menu classes built in( suckerfish, dualfish and dropline). Open the template manager and select the Grid Parameters and set the menu style.

Editing the Main Menu Javascript files

To change the MooTools effects of the Menu you must edit the code in the xtcMenu.js found the in the templates js/ folder. To edit: Open the templatename/layouts/default/layout.php file and edit the following:

xtcMenu(null, 'menu', 250,150,'h', new Fx.Transition(Fx.Transitions.Quint.easeInOut), 80, false, false);
xtcMenu(container, menu-class, fx-duration, pause, fx-type, transition-type, fps, center, align);

The following is a quick reference guide to the Javascript Settings:

container: The menu container element or ID as string. When null passed, the container by default is the whole document body.

menu-class: The class of the menus to be apply the script on.

fx-duration: The duration of the menu animation (slide, fade or slide&fade) in miliseconds.

pause: The amount of time in miliseconds the dropdown will wait before it starts to hide.

fx-type: The effect type: 'h' for height, 'f' for fade, and 'hf' for both height and fade at the same time.

transition-type: a Mootools transition object. Defaults to: new Fx.Transition(Fx.Transitions.Quint.easeInOut). More at: https://mootools.net/docs/core/Fx/Fx.Transitions

fps: Frames per second for the animation. Recommended value is from 50 to 80. It is NOT recommendable to increase the fps in order to achieve a better performance, if the browser and the DOM is too overloaded increasing the fps will actually add more load and the result may be worse. Fx smoothness is also determined by the browser video processing, always check how Chrome and IE are doing with the effect, Firefox is actually the worse at this.

center: When set to true, it will center the dropdowns under it's top level parent.

align: When set to true it will prevent the dropdowns to go out from its wrapper.