MenuMatic 0.68.3

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll's keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Syntax:

 

html:

<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" />
...
<ul id="nav">
	<li><a href="#" >Link 1</a></li>
	<li><a href="#" >Link 2</a>
		<ul>
			<li><a href="#" >Link3</a></li>
			<li><a href="#" >Link4</a></li>
		</ul>
	</li>
	<li><a href="#" >Link 5</a></li>
</ul>
...
<script type="text/javascript" src="http://www.google.com/jsapi" ></script> 
<script type="text/javascript" > google.load("mootools", "1.2.1"); </script>
<script type="text/javascript" src="js/MenuMatic_0.68.3.js" ></script>

 

javascript:

var myMenu = new MenuMatic({/*options here*/});

 

Features:

  • Search Engine Friendly: Only manipulates existing links, does not generate links with javascript.
  • Usable: Adjust hide delay to keep menus from disappearing to quickly.
  • Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys.
  • Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
  • Stylish: Control how menu looks with CSS, add flair with some effects.
  • Flexible: With plenty of options (and more coming down the road) and the open source code, make it do your bidding.

Options:

Primary Options
  • id [string]: Id of the main ul or ol element. Default = "nav"
  • subMenusContainerId [string]: Id of the div in which the submenus are contained. Default = "subMenusContainer"
 Sub-Menu Behavior Options
  • effect [string]: Default = Determines what effect if any are used. Current Available effects are "slide", "fade" and "slide & fade". Default = "slide & fade" 
  • duration [number]: duration of the effect in milliseconds. Default = 600 
  • physics [object]: Determines how the effect behaves. Default ="Fx.Transitions.Pow.easeOut"
  • hideDelay [number]: How long you have (in milliseconds) after moving your mouse off of the submenus before they dissapear. Default = "1000"
Layout Options
  • stretchMainMenu [boolean]: 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
  • matchWidthMode [boolean]: When true, initial submenus will expand to be as wide as thier parent button unless they are already wider than it.
  • orientation [string]: Orientation of the main menu, can be either "horizontal" or "vertical". Default = "horizontal"
  • center [boolean]: When set to true will center menu. Default = false
  • direction [object]
    • x [string]: 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"
    • y [string]: Determines the direction submenus come out of their parent link. Either "up" or "down" Default = "down"
  • tweakInitial [object]
    • x [number]: Nudges placement of initial submenus. Default = 0
    • y [number]: Nudges placement of inital submenus. Default = 0
  • tweakSubsequent [object]
    • x [number]: Nudges placement of subsequent submenus. Default = 0
    • y [number]: Nudges placement of subsequent submenus. Default =0
Dynamic Style Options
  • opacity [number]: Opacity of the submenus. Default = 95
  • killDivider [string]: 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)
  • fixHasLayoutBug [boolean]: When set to true will attempt to fix Microsoft's hasLayout bug. Default = false

Examples:

Example 1: Horizontal Menu
Horizontal Example

Example 2: Vertical Menu
Vertical Menu Example

Call-back Functions:

  • onHideAllSubMenusNow_begin
  • onHideAllSubMenusNow_complete
  • onInit_begin
  • onInit_complete
  • onSubMenuInit_begin(subMenuClass)
  • onSubMenuInit_complete(subMenuClass)
  • onMatchWidth_begin(subMenuClass)
  • onMatchWidth_complete(subMenuClass)
  • onHideSubMenu_begin(subMenuClass)
  • onHideSubMenu_complete(subMenuClass)
  • onHideOtherSubMenus_begin(subMenuClass)
  • onHideOtherSubMenus_complete(subMenuClass)
  • onHideAllSubMenus_begin(subMenuClass)
  • onHideAllSubMenus_complete(subMenuClass)
  • onPositionSubMenu_begin(subMenuClass)
  • onPositionSubMenu_complete(subMenuClass)
  • onShowSubMenu_begin(subMenuClass)
  • onShowSubMenu_complete(subMenuClass)

Call-back Function Example:

var myMenu = new MenuMatic({
          onPositionSubMenu_begin:function(classRef){					
               alert(classRef.btn.get("html"));//alerts text of the parent button as it begins to show its submenu
          }
     });

Notes:

Requirements: MooTools 1.2 Core.

Compatibility: All A-grade browsers*.
(* The drop down menus do not work in IE6 without javscript. There is no way to have a sematic ordered/unordered list of links work as a dropdown menu system in IE6 sans-javascript. If I am wrong, and you know of a solution that does not require a load of conditional comments in the html, please email me.)

The creation of a MenuMatic instance must be wrapped in a domready event.

window.addEvent('domready', function() {
     var myMenu = new MenuMatic();
});

Download