MenuNav Node Plugin: Basic Left Nav
+ ++This example demonstrates how to create a traditional, two-column page layout +(using Grids) with a set of fly-out menu navigation +in the left column. +
++ + + View example in new window. + + +
+ + +Setting Up the HTML
+
+Begin by including the CSS Grids dependencies and placing
+the markup for the two-column Grid on the page (this example uses the
+100% Centered Page Width with the
+Preset Template 1 that provides a 160px left column).
+Add the markup for the menu to the left column of the grid, and the class yui-skin-sam
+to the <body>.
+
Initializing the Menu
+
+With the menu markup in place, retrieve the Node instance representing the root
+menu (<div id="productsandservices">) and call the
+plug
+passing in a reference to the MenuNav Node Plugin.
+
// 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({base:"../../build/", timeout: 10000}).use("node-menunav", function(Y) { + + // Retrieve the Node instance representing the root menu + // (<div id="productsandservices">) and call the "plug" method + // passing in a reference to the MenuNav Node Plugin. + + var menu = Y.one("#productsandservices"); + + menu.plug(Y.Plugin.NodeMenuNav); + +});
+Note: In keeping with the
+Exceptional Performance
+team's recommendation, the script block used to instantiate the menu will be
+placed at the bottom of the page.
+This not only improves performance, it helps ensure that the DOM subtree of the
+element representing the root menu
+(<div id="productsandservices">) is ready to be scripted.
+
