YUI Library Examples: MenuNav Node Plugin: Basic Top Nav

MenuNav Node Plugin: Basic Top Nav

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 right column of the grid, and the class yui-skin-sam to the <body>.

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 yui-menu-horizontal to the node representing the root menu's bounding box, as illustrated below:

<div id="productsandservices" class="yui-menu yui-menu-horizontal"><!-- Bounding box -->
    <div class="yui-menu-content"><!-- Content box -->
        <ul>
            <!-- Menu items -->
        </ul>
    </div>
</div>

<div id="productsandservices" class="yui-menu yui-menu-horizontal"><!-- Bounding box -->
    <div class="yui-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({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);
 
});

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

YUI Library Examples: MenuNav Node Plugin: Basic Top Nav

MenuNav Node Plugin: Basic Top Nav

Setting Up the HTML

Initializing the Menu

MenuNav Node Plugin Examples:

More MenuNav Node Plugin Resources: