# Yahoo! UI Library

### node-menunav 3.3.0

Yahoo! UI Library > node-menunav
Search:
Filters Show Private Show Protected Show Deprecated

### Module: node-menunav

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>
`

This module contains the following classes:

- plugin.NodeMenuNav

Copyright © 2011 Yahoo! Inc. All rights reserved.