MenuNav Node Plugin: Left Nav With Submenus With Shadows
+ ++
+This example demonstrates how to add shadows to submenus of a menu built using the MenuNav Node +Plugin. +
+ + ++ + + View example in new window. + + +
+ + +Creating the Shadow HTML
++One way to add shadows 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 shadow will be represented in HTML as a single <div> element with a class
+of yui-menu-shadow applied, and can easily be 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 method to add the
+shadow to each submenu.
+
<div id="productsandservices">) is ready to be scripted.
+
+
+Styling the Shadow HTML
+
+With the shadow element appended to each submenu, the next step is to define the style for the
+shadow. The shadows in this example will be 12% alpha transparent black, and offset from the left,
+bottom, and right edges of each submenu's content box by 3px. To create this effect, start by
+setting the position property to absolute and the z-index
+property to -1. This will position each submenu's shadow behind its content box. For
+the 12% alpha transparent black color, set the background-color to #000
+and opacity property to .12.
+
+Next, set the both the width and height properties to 100%
+so that the dimensions of the shadow match that of each submenu's bounding box.
+(Note: Setting the height property to 100% won't work in IE 6
+Strict Mode unless the element's parent element has a height defined. For this reason the the
+MenuNav Node Plugin automatically sets the width and height properties of
+each submenu's bounding box to the values of its offsetWidth and
+offsetHeight properties before it is made visible.)
+
+To create the three-sided effect for the shadow, set the padding property to
+1px 3px 0 3px. As the CSS Box Model specifies that the value for padding is used to
+calculate the total width of of an element, the addition of the padding to the shadow makes the
+rendered width of the shadow 6px wider (100% + 6px) and 1px taller (100% + 1px) than that of each
+submenu's bounding box. Finally, setting the top property to 2px and
+the left property to -3px will position the shadow so that its offset
+from the left, bottom, and right edge of each submenu's content box by 3px.
+
+Lastly, it is necessary to modify the position and dimensions of the <iframe>
+shim, otherwise <select> elements will poke through each submenu's shadow in
+IE 6. Start by setting the z-index property to -2 so that the
+<iframe> shim is behind the shadow element. Next, set the padding
+property to 3px 3px 0 3px. The core CSS file for MenuNav already sets the
+height and width properties to 100%, so the addition of the
+padding will result in the calculated width and height of the <iframe> shim
+being 100% + 6px and 100% + 3px respectively — enough to shim the shadow. Lastly, setting the
+left property to -1 syncs the left edge of the
+<iframe> with that of the shadow.
+