Yahoo! UI Library

The MenuNav Node Plugin makes it easy to transform existing list-based markup into traditional, drop down navigational menus that are both accessible and easy to customize, and only require a small set of dependencies.

To use the MenuNav Node Plugin, simply pass a reference to the plugin to a Node instance's plug method.

<script type="text/javascript">

// Call the "use" method, passing in "node-menunav". This will load the
// script and CSS for the MenuNav Node Plugin and all of the required
// dependencies.

YUI().use("node-menunav", function(Y) {

// Use the "contentready" event to initialize the menu when the subtree of
// element representing the root menu (<div id="menu-1">) is ready to
// be scripted.

Y.on("contentready", function () {

// The scope of the callback will be a Node instance representing
// the root menu (<div id="menu-1">). Therefore, since "this"
// represents a Node instance, it is possible to just call "this.plug"
// passing in a reference to the MenuNav Node Plugin.

this.plug(Y.plugin.NodeMenuNav);

}, "#menu-1");

});

</script>


The MenuNav Node Plugin has several configuration properties that can be set via an object literal that is passed as a second argument to a Node instance's plug method.

<script type="text/javascript">

// Call the "use" method, passing in "node-menunav". This will load the
// script and CSS for the MenuNav Node Plugin and all of the required
// dependencies.

YUI().use("node-menunav", function(Y) {

// Use the "contentready" event to initialize the menu when the subtree of
// element representing the root menu (<div id="menu-1">) is ready to
// be scripted.

Y.on("contentready", function () {

// The scope of the callback will be a Node instance representing
// the root menu (<div id="menu-1">). Therefore, since "this"
// represents a Node instance, it is possible to just call "this.plug"
// passing in a reference to the MenuNav Node Plugin.

this.plug(Y.plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });

}, "#menu-1");

});

</script>


The complete list of the MenuNav Node Plugin configuration properties are:

useARIA

Boolean indicating if use of the WAI-ARIA Roles and States should be enabled for the MenuNav. Set to true by default for Firefox 3 and Internet Explorer 8 as currently only these browsers have support for ARIA, and are supported by several screen readers for Windows that also offer support for ARIA.

autoSubmenuDisplay

Boolean indicating if submenus are automatically made visible when the user mouses over the menu's items. Set to true by default.

submenuShowDelay

Number indicating the time (in milliseconds) that should expire before a submenu is made visible when the user mouses over the menu's label. Set to 250 by default.

submenuHideDelay

Number indicating the time (in milliseconds) that should expire before a submenu is hidden when the user mouses out of a menu label heading in the direction of a submenu. Set to 250 by default.

mouseOutHideDelay

Number indicating the time (in milliseconds) that should expire before a submenu is hidden when the user mouses out of it. Set to 750 by default.