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