YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: MenuNav Node Plugin: Split Button Top Nav

## MenuNav Node Plugin: Split Button Top Nav

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

View example in new window.

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

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

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

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

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

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

Next, define the markup for each menu label. Start with a `<span>` with a class of `yui-menu-label` applied. Inside the `<span>`, place two `<a>` elements — one for each of the label's two clickable regions. Each `<a>` has separate, but related responsibilities: The first `<a>` represents the label's default action. The second `<a>` toggles the display of a submenu whose content contains other options related to, or in the same category of the default action. Therefore to configure the first `<a>`, simply set its `href` attribute to any URL. For the second `<a>`, apply a class name of `yui-menu-toggle`, and set the value of the `href` attribute to the id of the label's corresponding submenu. Lastly, the text node of the second `<a>` should label the contents of its corresponding submenu.

    <div id="menu-1" class="yui-menu yui-menu-horizontal yui-splitbuttonnav"><!-- Bounding box -->    <div class="yui-menu-content"><!-- Content box -->        <ul>            <li>                 <span class="yui-menu-label"><!-- menu label root node -->                    <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action -->                    <a href="#answers-options" class="yui-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->                </span>                 <div id="answers-options" class="yui-menu">                    <div class="yui-menu-content">                        <ul>                            <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>                            <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>                            <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>                            <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>                        </ul>                    </div>                </div>             </li>        </ul>    </div></div>

    <div id="menu-1" class="yui-menu yui-menu-horizontal yui-splitbuttonnav"><!-- Bounding box -->
        <div class="yui-menu-content"><!-- Content box -->
            <ul>
                <li>

                    <span class="yui-menu-label"><!-- menu label root node -->
                        <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action -->
                        <a href="#answers-options" class="yui-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->
                    </span>

                    <div id="answers-options" class="yui-menu">
                        <div class="yui-menu-content">
                            <ul>
                                <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
                                <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
                                <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
                                <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>
                            </ul>
                        </div>
                    </div>

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

<div id="menu-1" class="yui-menu yui-menu-horizontal yui-splitbuttonnav"><!-- Bounding box --> <div class="yui-menu-content"><!-- Content box --> <ul> <li> <span class="yui-menu-label"><!-- menu label root node --> <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action --> <a href="#answers-options" class="yui-menu-toggle">Answers Options</a><!-- menu label submenu toggle --> </span> <div id="answers-options" class="yui-menu"> <div class="yui-menu-content"> <ul> <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li> <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li> <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li> <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;more=y">Discover</a></li> </ul> </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.

Use the `autoSubmenuDisplay` and `mouseOutHideDelay` configuration attributes to configure the menu labels to behave like split buttons. Set the `autoSubmenuDisplay` to `false`, so that each menu label's submenu isn't made visible until the menu trigger is clicked. Set the `mouseOutHideDelay` to `0` so that a label's submenu is only hidden when the user mouses down on an area outside of the submenu.

    <!-- YUI Seed --><script type="text/javascript" src="../../build/yui/yui.js"></script> <script type="text/javascript">//  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, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 }); });</script>

    <!-- YUI Seed -->
    <script type="text/javascript" src="../../build/yui/yui.js"></script>

    <script type="text/javascript">
    //  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, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });

    });
    </script>

<!-- YUI Seed --> <script type="text/javascript" src="../../build/yui/yui.js"></script> <script type="text/javascript"> // 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, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 }); }); </script>
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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings