- Fusion Menu
A Mootools enhanced CSS dropdown menu, with multi-columns, icons and more.
A static two level menu placing parents items in the header area, and child items in the sidebar.
Go to Admin Dashboard → Appearance → Widgets → Gantry Menu to find all the parameters for Fusion Menu and Splitmenu, such as transitions, duration and sublevel position.
Fusion with MegaMenu
Below is a list of the most recent features added to Fusion Menu:
- Triple / Quad Column Mode
- Column Menu Grouping
- Column Width Control
Below is a list of the standard, recurring features of the Fusion Menu:
- Single Column Mode
- Dual Column Mode
- Menu Item Subtext
- Menu Item Icons
Basic Fusion Parameters
Subtext Line is the option that allows you to insert additional text to the Menu Item Title. There is separate styling for this, making it useful for adding brief descriptions to menu items.
Adding Menu Icons
Icon is the option that allows you to insert an inline icon / image to the Menu Item.
Advanced Fusion Parameters: Columns
Number of Columns
Columns of Child Items allows you to determine how many columns the Fusion dropdowns are presented in. You can have anywhere between a single dropdown to a four column dropdown.
Item Distribution allows you to control how the menu items are ordered in the dropdowns:
- Evenly: If there are 7 menu items in 3 columns, Fusion will allocate a 3,2,2 distribution – trying to equalize each dropdown.
- Order: If there are 7 menu items in 3 columns, Fusion will allocate a 3,3,1 distribution – maintaining the item ordering.
Drop-Down Width (px)
Drop-Down Width (px) determines the total width of the dropdown, regardless of how many columns are shown. This option is to be used in conjunction with Column Widths (px)
Column Widths (px)
Column Widths (px) determines the width of each Column. Separate each width by a comma. The final column’s width is determined automatically. This option is to be used in conjunction with Drop-Down Width (px)
Below are some example configurations:
- Drop-Down Width: 480px: 160,160. Fusion automatically calculates the final width as 160, so in practise, 160,160,160 is the actual distribution.
- Drop-Down Width: 600px: 160,160. Fusion automatically calculates the final width as 280, so in practise, 160,160,280 is the actual distribution.
Advanced Fusion Parameters: Groupings
What is Grouping?
Group Child Items changes the behaviour of child items in the dropdown menus, instead of creating a dropdown for the immediate sublevel, this option places them inline. See below for an illustrated example of the differences:
Set Group Child Items to Yes to activate the mode. The sublevels well then appear below the parent menu item in a categorical type structure.
Template Configuration: Fusion Menu
Go to Admin Dashboard → Appearance → Widgets → Gantry Menu Set Menu Theme to Type : Fusion.
A static menu system that displays submenu items outside of the main horizontal menu and the 2nd level items in the Sidebar.
Template Configuration: Splitmenu
Go to Admin Dashboard → Appearance → Widgets → Gantry Menu Set Menu Theme to Type : Split-Menu. Please also turn on Limit Levels parameter so the Splitmenu would show up only one level of the menu items.