+ This example demonstrates how to create a traditional, two-column page layout (using Grids) with top navigation featuring drop-down menus. +
+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. +
+
+Note: be sure to add the yui3-skin-sam classname to the
+page's <body> element or to a parent element of the widget in order to apply
+the default CSS skin. See Understanding Skinning.
+
<body class="yui3-skin-sam"> <!-- You need this skin class -->+ + + +
+The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
+orientation. The default orientation for menus is vertical, but can be easily switched to
+horizontal by applying a class of yui3-menu-horizontal to the node representing the
+root menu's bounding box, as illustrated below:
+
<div id="productsandservices" class="yui3-menu yui3-menu-horizontal"><!-- Bounding box --> + <div class="yui3-menu-content"><!-- Content box --> + <ul> + <!-- Menu items --> + </ul> + </div> +</div>+ + + +
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);
+
+});
+
+
+
+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.
+