Introduction

Mootools Mega Menu is a plugin of Menu Pro that turns navigating large websites issue into a piece of cake. It is written in native mootools and works almost the same as Mootools Dropdown Menu so you don't have to worry about javascript conflict.

Mootools Mega Menu not only has fewer accessibility problems but makes many menu items visible at once with no scrolling steps. Besides, the mega menu divides menu/sub-menu items into groups of navigation options and gives users more scope to customize their own menu’s appearance.

Features

• Columns: You can set the number of columns in which sub-menu items are grouped in.
• Flexible Width: Mootools Mega Menu allows you to adjust the width of submenu and submenu column.
• 2 Gorgeous Themes: The plugin supports silver and opera theme by default.
• Wrapper Selector: This option keeps flyout menus from spilling out of the container.
• Animation Type: This option allows you to enable, disable or customize the Mega Menu animation. The animation for Mega Menu only works in LTR mode.
• Animation Control: You can control time of slide/fade effect and time delay applied to Mega Menu.
• Customizable CSS: The menu allows you to add your own CSS code without editing files.

Click here to see demo.

Installation

• Get the module Menu Pro from ExtStore.
  
• Follow the instruction here to install and set for Menu Pro successfully.
• Let's get Mega Menu plugin from ExtStore.
  
• Go to Administrator site, click to Extensions → Extension Manager, then Browse the file and Upload and Install.
• Go to Plug-in Manager to publish Mega Menu Plugin

 

• Go to Extensions → Module Manger, click on the option bar to create a new Menu Pro module.
• A pop-up window will appear, click to Menu Pro, click to edit the settings.

 

Setting for Mega Menu

Setting for Basic Option

• Select Plugin: Default (used as the Joomla menu); If you choose Mega Menu, you may customize the following Options.
• Select menu: Choose Mega Menu to display.
• Menu Tag ID: Enter a value to assign as the id property of the root tag when the Menu is displayed.
• Start Level: Level to start rendering.
• End Level: Level to end rendering.
• Show sub-menu items: Choose Yes/No to show or not show your menu in multileveL menu.

Setting for Mega Menu Options

• Theme: Theme Style of Mega Menu: Opera or Silver style.
• Wrapper Selector: Selector of the element that contains the menu for aligning menu. type correspondingly.
• Animation Type: Enable/Disable or Customize the Mega Menu animation in LTR mode in None, Fade, Slide, Slide & Fade.
• Animation Duration: Time for the slide/fade effect applied to Mega Menu
• Delay Hide Time: Time delay before hidding the submenu when mouse out.
• Custom CSS: Modify the visual style of the menu. Slide & Fade.

Setting for Menu Assignment

• Module Assignment: Choose to assign module in selected pages.
• Menu Selection: Select menu type.

Settings for Mega Menu Items

Menus → Menu Manager, click in a menu type. For example: click to Using Extensions to edit, then choose Mega Menu Parameters to set up.

Mega Menu Items Parameters

• Show Title: Show or Not Show title of menu items.
• Add Description: Add information shown as the Tag line below the Menu Item and Submenu Item Title.
• Columns: Numbers of columns for first level menu items.
• Group: Yes for number of columns per first level menu items.
• Submenu Width: Set the width of submenu
• Subdmenu Column Width:Set the width of submenu columns
• Submenu Column[i] Width: Enter the desired width for every column like colw1=200 or colw3=300
• Additional Class: Additional CSS class to apply to the menu items.
• Submenu Content: Choose content to show in submenus. Use Ctrl + Click to select Multiple Items.
  • Child menu items: Option to show child menu items.
  • Modules: Select module to display menu.
  • Module positions: Select the position to display menu.

Show on the frontpage

Support

If you have questions regarding specific details or need any help with the product, feel free to contact us and join Extstore forum.