1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Search Engine Friendly:
Adjust hide delay to keep menus from disappearing to quickly.
Tab through main menu links with tab key. Navigate through drop down menus with arrow keys.
Control how menu looks with CSS, add flair with some effects.
With plenty of options (and more coming down the road) and the open source code, make it do your bidding.
Id of the main ul or ol element. Default = “nav”
Id of the div in which the submenus are contained. Default = “subMenusContainer”
Sub-Menu Behavior Options
Determines what effect if any are used. Current Available effects are “slide”, “fade” and “slide & fade”. Default = “slide & fade”
duration of the effect in milliseconds. Default = 600
Determines how the effect behaves. Default =”Fx.Transitions.Pow.easeOut”
How long you have (in milliseconds) after moving your mouse off of the submenus before they dissapear. Default = “1000”
When true will stretch main menu link widths to fit within the width (set in the css) of the parent ul or ol element. Default = false
When true, initial submenus will expand to be as wide as thier parent button unless they are already wider than it.
Orientation of the main menu, can be either “horizontal” or “vertical”. Default = “horizontal”
When set to true will center menu. Default = false
Determines the direction submenus come out of their parent link. Either “left” or “right” Will be overridden if submenu bounces off edge of viewport. Default = “left”
Determines the direction submenus come out of their parent link. Either “up” or “down” Default = “down”
- x [string]:
Nudges placement of initial submenus. Default = 0
Nudges placement of inital submenus. Default = 0
- x [number]:
Nudges placement of subsequent submenus. Default = 0
Nudges placement of subsequent submenus. Default =0
- x [number]:
Dynamic Style Options
Opacity of the submenus. Default = 95
When set to “first” will remove the first divider in the main menu. When set to “last” will remove the last one. (The “divider” being a background image on the li elements)
When set to true will attempt to fix Microsoft’s hasLayout bug. Default = false
Call-back Function Example:
1 2 3 4 5 6
Requirements: MooTools 1.2 Core.
Compatibility: All A-grade browsers*.
The creation of a MenuMatic instance must be wrapped in a domready event.
1 2 3