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>