YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: MenuNav Node Plugin: Left Nav With Submenus With Rounded Corners

## MenuNav Node Plugin: Left Nav With Submenus With Rounded Corners

This example demonstrates how to add rounded corners to submenus of a menu built using the MenuNav Node Plugin.

View example in new window.

### Creating the Rounded Corner HTML

One way to add rounded corners to submenus is to append decorator elements to the node representing a submenu's bounding box. As the name implies, decorator elements add no semantic value to the markup, but enable additional styles to be applied. When adding any decorator elements to create effects like shadows or rounded corners, always add those elements via JavaScript, since it is only when JavaScript is enabled that a menu's markup is transformed in a drop-down menu system via the MenuNav Node Plugin.

Each rounded corner is created by applying a background image to a `<div>`. A class name identifying the corner will be added to each `<div>`. The `<div>`s used to create the right corners will be nested inside the `<div>`s used to create the left corners, and each `<div>` for the left corners will have an additional class name of `yui-menu-corner`. The template for each set of rounded corners comes together as follows:

    <!-- top-left and top-right corners --><div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div> <!-- bottom-left and bottom-right corners --><div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></div>

    <!-- top-left and top-right corners -->
    <div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div>

    <!-- bottom-left and bottom-right corners -->
    <div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></div>

<!-- top-left and top-right corners --> <div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div> <!-- bottom-left and bottom-right corners --> <div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></div>

The `<div>`s for each corner is created by passing a string of HTML to Node's `create` method. Use the `all` method to retrieve Node instances for each submenu, and the `append` and `prepend` methods to add the rounded corners `<div>`s to the bounding box of each submenu.

    //  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">)     var menu = Y.one("#productsandservices");      //  Use the "all" method to retrieve the    //  Node instances representing each submenu.     menu.all(".yui-menu").each(function (node) {         //  Add decorator elements used to create the rounded corners to the        //  bounding box of each submenu.         // Insert the first decorator before the submenu's content box        node.prepend('<div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div>');         // Insert the second decorator after the submenu's content box        node.append('<div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></div>');     });      //  Call the "plug" method of the Node instance, passing in a reference to the    //  MenuNav Node Plugin.     menu.plug(Y.Plugin.NodeMenuNav);     //  Show the menu now that it is ready     menu.get("ownerDocument").get("documentElement").removeClass("yui-loading"); });

    //  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">)

        var menu = Y.one("#productsandservices");

        //  Use the "all" method to retrieve the
        //  Node instances representing each submenu.

        menu.all(".yui-menu").each(function (node) {

            //  Add decorator elements used to create the rounded corners to the
            //  bounding box of each submenu.

            // Insert the first decorator before the submenu's content box
            node.prepend('<div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div>');

            // Insert the second decorator after the submenu's content box
            node.append('<div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></div>');

        });

        //  Call the "plug" method of the Node instance, passing in a reference to the
        //  MenuNav Node Plugin.

        menu.plug(Y.Plugin.NodeMenuNav);

        //  Show the menu now that it is ready

        menu.get("ownerDocument").get("documentElement").removeClass("yui-loading");

    });

// 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">) var menu = Y.one("#productsandservices"); // Use the "all" method to retrieve the // Node instances representing each submenu. menu.all(".yui-menu").each(function (node) { // Add decorator elements used to create the rounded corners to the // bounding box of each submenu. // Insert the first decorator before the submenu's content box node.prepend('<div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div>'); // Insert the second decorator after the submenu's content box node.append('<div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></div>'); }); // Call the "plug" method of the Node instance, passing in a reference to the // MenuNav Node Plugin. menu.plug(Y.Plugin.NodeMenuNav); // Show the menu now that it is ready menu.get("ownerDocument").get("documentElement").removeClass("yui-loading"); });
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.

### Create the Rounded Corner Background Image

For performance, each rounded corner `<div>` uses the same image as its background image, but only reveals the relevant section of the image via the `background-position` property. The complete image is as follows:

### Styling the Rounded Corner HTML

With the rounded corner elements appended to each submenu, the next step is to define the styles that create the rounded corner effect. Start by overriding the values for `border` and `padding` specified for the content box of each submenu in the Sam skin CSS. The top and bottom borders are set to 0, since both borders will be drawn by the background image used to create the rounded corners. The top and bottom padding will be created by setting the height of each `<div>` inside the `<div class="yui-menu-corner">`.

    /*    Overide the values for border and padding specified for the content box of each submenu in    the Sam skin CSS.  The top and bottom borders are set to 0, since both borders will be drawn    by the background image used to create the rounded corners.  The top and bottom padding    will be created by setting the height of each <div> inside the    <div class="yui-menu-corner">.*/ #productsandservices .yui-menu .yui-menu-content {     border-top: 0;    border-bottom: 0;    padding: 0; }

    /*
        Overide the values for border and padding specified for the content box of each submenu in
        the Sam skin CSS.  The top and bottom borders are set to 0, since both borders will be drawn
        by the background image used to create the rounded corners.  The top and bottom padding
        will be created by setting the height of each <div> inside the
        <div class="yui-menu-corner">.
    */

    #productsandservices .yui-menu .yui-menu-content {

        border-top: 0;
        border-bottom: 0;
        padding: 0;

    }

/* Overide the values for border and padding specified for the content box of each submenu in the Sam skin CSS. The top and bottom borders are set to 0, since both borders will be drawn by the background image used to create the rounded corners. The top and bottom padding will be created by setting the height of each <div> inside the <div class="yui-menu-corner">. */ #productsandservices .yui-menu .yui-menu-content { border-top: 0; border-bottom: 0; padding: 0; }

Next, define the styles for each corner element. The `<div>`s for the top-left and bottom-left corners define a right margin that will provide space for the their inner `<div>`s to fill using a negative right margin. Each inner `<div>` will define a left margin to reveal the background image applied to its parent `<div>`.

    .yui-menu-corner {     margin-right: 4px;  /*  Reserve space for the top-right and bottom-right corners. */     /* The background image (sprite) for the top-left and bottom-left corners. */    background: url(assets/round.png) no-repeat; } .yui-menu-corner div {     height: 4px;     margin: 0 -4px 0 4px;   /*  Use a negative right margin to move the <div> into                                the right margin of the parent element                                (<div class="yui-menu-corner">) to draw the top-right                                and bottom-right corners.                                 Apply a left margin to reveal the background image                                applied to the parent element for the top-left and                                bottom-left corners. */     /* The background image (sprite) for the top-right and bottom-right corners. */    background: url(assets/round.png) no-repeat;     _position: relative;    /*  Necessary to get negative margins working in IE 6                                (Standards Mode and Quirks Mode and IE 7 (Quirks                                Mode only). */     _font-size: 0;  /*  Necessary to collapse the height of the <div> in IE 6                        (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so                        that it renders at 4px tall.  */ }

    .yui-menu-corner {

        margin-right: 4px;  /*  Reserve space for the top-right and bottom-right corners. */

        /* The background image (sprite) for the top-left and bottom-left corners. */
        background: url(assets/round.png) no-repeat;

    }

    .yui-menu-corner div {

        height: 4px;

        margin: 0 -4px 0 4px;   /*  Use a negative right margin to move the <div> into
                                    the right margin of the parent element
                                    (<div class="yui-menu-corner">) to draw the top-right
                                    and bottom-right corners.

                                    Apply a left margin to reveal the background image
                                    applied to the parent element for the top-left and
                                    bottom-left corners. */

        /* The background image (sprite) for the top-right and bottom-right corners. */
        background: url(assets/round.png) no-repeat;

        _position: relative;    /*  Necessary to get negative margins working in IE 6
                                    (Standards Mode and Quirks Mode and IE 7 (Quirks
                                    Mode only). */

        _font-size: 0;  /*  Necessary to collapse the height of the <div> in IE 6
                            (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so
                            that it renders at 4px tall.  */

    }

.yui-menu-corner { margin-right: 4px; /* Reserve space for the top-right and bottom-right corners. */ /* The background image (sprite) for the top-left and bottom-left corners. */ background: url(assets/round.png) no-repeat; } .yui-menu-corner div { height: 4px; margin: 0 -4px 0 4px; /* Use a negative right margin to move the <div> into the right margin of the parent element (<div class="yui-menu-corner">) to draw the top-right and bottom-right corners. Apply a left margin to reveal the background image applied to the parent element for the top-left and bottom-left corners. */ /* The background image (sprite) for the top-right and bottom-right corners. */ background: url(assets/round.png) no-repeat; _position: relative; /* Necessary to get negative margins working in IE 6 (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only). */ _font-size: 0; /* Necessary to collapse the height of the <div> in IE 6 (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so that it renders at 4px tall. */ }

The last step is to simply set `background-position` property for the bottom-left, top-right, and bottom-right corner elements to reveal the corresponding section of the corner background image.

    /*    Set the "background-position" property for the bottom-left, top-right, and    bottom-right corner elements to reveal the corresponding section of the corner    background image.*/ .yui-menu-corner-bl {     background-position: left bottom; } .yui-menu-corner .yui-menu-corner-tr {     background-position: top right; } .yui-menu-corner .yui-menu-corner-br {     background-position: right bottom; }

    /*
        Set the "background-position" property for the bottom-left, top-right, and
        bottom-right corner elements to reveal the corresponding section of the corner
        background image.
    */

    .yui-menu-corner-bl {

        background-position: left bottom;

    }

    .yui-menu-corner .yui-menu-corner-tr {

        background-position: top right;

    }

    .yui-menu-corner .yui-menu-corner-br {

        background-position: right bottom;

    }

/* Set the "background-position" property for the bottom-left, top-right, and bottom-right corner elements to reveal the corresponding section of the corner background image. */ .yui-menu-corner-bl { background-position: left bottom; } .yui-menu-corner .yui-menu-corner-tr { background-position: top right; } .yui-menu-corner .yui-menu-corner-br { background-position: right bottom; }

Copyright © 2009 Yahoo! Inc. All rights reserved.

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