greengecko design

The Web Presence of Jason John Jaeger.

MenuMatic

MenuMatic is a MooTools 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.

Demos:

Demo 1: Horizontal Menu

Demo 2: Vertical Menu

Usage:

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
<!-- Link to the MenuMatic CSS file at the top of your page. -->
<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" />

<!-- Have Some Unordered List with an id -->
<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>

<!-- Include the MooTools Framework at the bottom of your file -->
<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>

<!-- After that, (in your own javascript file) create a new class instance. -->
<script>
window.addEvent('domready', function() {
    var myMenu = new MenuMatic({ id:'nav' });
});
</script>

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]:
    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

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:

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

Notes:

Requirements: MooTools 1.2 Core.

Compatibility: All A-grade browsers*.
(* The drop down menus do not work in IE6 without javascript. 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.

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

Download:

Download MenuMatic 0.68.3

Comments