Example: Menu Button Top Nav

This example demonstrates how to create a traditional, two-column page layout (using Grids) with top navigation rendered like menu buttons.

View Example in New Window

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>

To render each menu label in the horizontal menu as a menu button, add the class yui3-menubuttonnav to the node representing the root menu's bounding box, as illustrated below: 

<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
    <div class="yui3-menu-content"><!-- Content box -->
        <ul>
            <!-- Menu items -->
        </ul>
    </div>
</div>

Next, wrap the text node of each menu label of the root menu in an <em> element: 

<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
    <div class="yui3-menu-content"><!-- Content box -->
        <ul>

            <li>
                <a class="yui3-menu-label" href="#submenu-1"><em>Submenu Label</em></a>
                <div id="submenu-1" class="yui3-menu">
                    <div class="yui3-menu-content">

                        <!-- submenu content -->

                    </div>
                </div>
            </li>

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

Examples