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:
+
+The <div>s for each corner is created by passing a string
+of HTML to Node's create method. Use
+the queryAll method to
+retrieve Node instances for each submenu, and the
+appendChild and
+insertBefore
+methods to add the rounded corners <div>s to the bounding box of each submenu.
+
<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">.
+
+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>.
+
+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.
+