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 grid
markup (this example uses a 2 column version of the
Fluid Page Template with 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().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); });
// 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) { // 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); });