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>
+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"); + +});
<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; + +}
+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. */ + +}
+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; + +}
