<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: MenuNav Node Plugin: Left Nav With Submenus With Shadows</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--there is no custom header content for this example-->
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p>
<em>
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
</em>
</p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: MenuNav Node Plugin: Left Nav With Submenus With Shadows</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>MenuNav Node Plugin: Left Nav With Submenus With Shadows</h2>
<div id="example" class="promo">
<div class="example-intro">
<p>
This example demonstrates how to add shadows to submenus of a menu built using the MenuNav Node
Plugin.
</p>
</div>
<div class="module example-container newWindow">
<div id="example-canvas" class="bd">
<p class="newWindowButton yui-skin-sam">
<span id="newWindowLink">
<span class="first-child">
<a href="node-menunav-5_source.html" target="_blank">View example in new window.</a>
</span>
</span>
</p>
</div>
</div>
</div>
<h3>Creating the Shadow HTML</h3>
<p>
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.
</p>
<p>
Each shadow will be represented in HTML as a single <code><div></code> element with a class
of <code>yui-menu-shadow</code> applied, and can easily be created by passing a string of HTML
to Node's <a href="../../api/Node.html#method_create"><code>create</code></a> method. Use the
<a href="../../api/Node.html#method_all"><code>all</code></a> method to
retrieve Node instances for each submenu, and the
<a href="../../api/Node.html#method_append"><code>append</code></a> method to add the
shadow to each submenu.
</p>
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Call the "use" method, passing in "node-menunav". This will load the</span></div></li><li class="li1"><div class="de1"><span class="co1">// script and CSS for the MenuNav Node Plugin and all of the required</span></div></li><li class="li1"><div class="de1"><span class="co1">// dependencies.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"node-menunav"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Retrieve the Node instance representing the root menu</span></div></li><li class="li1"><div class="de1"> <span class="co1">// (<div id="productsandservices">)</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> menu <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#productsandservices"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Use the "all" method to retrieve the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Node instances representing each submenu.</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> menu.<span class="me1">all</span><span class="br0">(</span><span class="st0">".yui-menu"</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span> <span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Append a shadow element to the bounding box of each submenu</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> node.<span class="me1">append</span><span class="br0">(</span><span class="st0">'<div class="yui-menu-shadow"></div>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Call the "plug" method of the Node instance, passing in a reference to the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// MenuNav Node Plugin.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> menu.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">NodeMenuNav</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Show the menu now that it is ready</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> menu.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"documentElement"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-loading"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Call the "use" method, passing in "node-menunav". This will load the</span>
<span class="co1">// script and CSS for the MenuNav Node Plugin and all of the required</span>
<span class="co1">// dependencies.</span>
YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"node-menunav"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// Retrieve the Node instance representing the root menu</span>
<span class="co1">// (<div id="productsandservices">)</span>
<span class="kw2">var</span> menu <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#productsandservices"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Use the "all" method to retrieve the</span>
<span class="co1">// Node instances representing each submenu.</span>
menu.<span class="me1">all</span><span class="br0">(</span><span class="st0">".yui-menu"</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span> <span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// Append a shadow element to the bounding box of each submenu</span>
node.<span class="me1">append</span><span class="br0">(</span><span class="st0">'<div class="yui-menu-shadow"></div>'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Call the "plug" method of the Node instance, passing in a reference to the</span>
<span class="co1">// MenuNav Node Plugin.</span>
menu.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">NodeMenuNav</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Show the menu now that it is ready</span>
menu.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"documentElement"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-loading"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">// 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) {
// Append a shadow element to the bounding box of each submenu
node.append('<div class="yui-menu-shadow"></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");
});</textarea></div><em>Note:</em> In keeping with the
<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
team's recommendation, the script block used to instantiate the menu will be
<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
This not only improves performance, it helps ensure that the DOM subtree of the
element representing the root menu
(<code><div id="productsandservices"></code>) is ready to be scripted.
</p>
<h3>Styling the Shadow HTML</h3>
<p>
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 <code>position</code> property to <code>absolute</code> and the <code>z-index</code>
property to <code>-1</code>. This will position each submenu's shadow behind its content box. For
the 12% alpha transparent black color, set the <code>background-color</code> to <code>#000</code>
and <code>opacity</code> property to <code>.12</code>.
</p>
<p>
Next, set the both the <code>width</code> and <code>height</code> properties to <code>100%</code>
so that the dimensions of the <code>shadow</code> match that of each submenu's bounding box.
(<em>Note:</em> Setting the <code>height</code> property to <code>100%</code> 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 <code>width</code> and <code>height</code> properties of
each submenu's bounding box to the values of its <code>offsetWidth</code> and
<code>offsetHeight</code> properties before it is made visible.)
</p>
<p>
To create the three-sided effect for the shadow, set the <code>padding</code> property to
<code>1px 3px 0 3px</code>. 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 <code>top</code> property to <code>2px</code> and
the <code>left</code> property to <code>-3px</code> will position the shadow so that its offset
from the left, bottom, and right edge of each submenu's content box by 3px.
</p>
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re1">.yui-menu-shadow</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">z-index</span><span class="sy0">:</span> -<span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">2px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> opacity<span class="sy0">:</span> .12<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> filter<span class="sy0">:</span> alpha<span class="br0">(</span>opacity<span class="sy0">=</span><span class="nu0">12</span><span class="br0">)</span><span class="sy0">;</span> <span class="coMULTI">/* For IE since it doesn't implement the CSS3</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> "opacity" property. */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">3px</span> <span class="nu0">0</span> <span class="re3">3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3"><span class="nu0">100</span>%</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3"><span class="nu0">100</span>%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re1">.yui-menu-shadow</span> <span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
<span class="kw1">z-index</span><span class="sy0">:</span> -<span class="nu0">1</span><span class="sy0">;</span>
<span class="kw1">top</span><span class="sy0">:</span> <span class="re3">2px</span><span class="sy0">;</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-3px</span><span class="sy0">;</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span>
opacity<span class="sy0">:</span> .12<span class="sy0">;</span>
filter<span class="sy0">:</span> alpha<span class="br0">(</span>opacity<span class="sy0">=</span><span class="nu0">12</span><span class="br0">)</span><span class="sy0">;</span> <span class="coMULTI">/* For IE since it doesn't implement the CSS3
"opacity" property. */</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">3px</span> <span class="nu0">0</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3"><span class="nu0">100</span>%</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3"><span class="nu0">100</span>%</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax2-plain">.yui-menu-shadow {
position: absolute;
z-index: -1;
top: 2px;
left: -3px;
background-color: #000;
opacity: .12;
filter: alpha(opacity=12); /* For IE since it doesn't implement the CSS3
"opacity" property. */
padding: 1px 3px 0 3px;
width: 100%;
height: 100%;
}</textarea></div>
<p>
Lastly, it is necessary to modify the position and dimensions of the <code><iframe></code>
shim, otherwise <code><select></code> elements will poke through each submenu's shadow in
IE 6. Start by setting the <code>z-index</code> property to <code>-2</code> so that the
<code><iframe></code> shim is behind the shadow element. Next, set the <code>padding</code>
property to <code>3px 3px 0 3px</code>. The core CSS file for MenuNav already sets the
<code>height</code> and <code>width</code> properties to <code>100%</code>, so the addition of the
padding will result in the calculated width and height of the <code><iframe></code> shim
being 100% + 6px and 100% + 3px respectively — enough to shim the shadow. Lastly, setting the
<code>left</code> property to <code>-1</code> syncs the left edge of the
<code><iframe></code> with that of the shadow.
</p>
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re0">#productsandservices</span> <span class="re1">.yui-menu</span> <span class="re1">.yui-shim</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">z-index</span><span class="sy0">:</span> -<span class="nu0">2</span><span class="sy0">;</span> <span class="coMULTI">/* Place the iframe shim behind the shadow element */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Adjust the dimensions of the <iframe> shim to match the shadow,</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> otherwise <select> elements will poke through the shadow.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">3px</span> <span class="re3">3px</span> <span class="nu0">0</span> <span class="re3">3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re0">#productsandservices</span> <span class="re1">.yui-menu</span> <span class="re1">.yui-shim</span> <span class="br0">{</span>
<span class="kw1">z-index</span><span class="sy0">:</span> -<span class="nu0">2</span><span class="sy0">;</span> <span class="coMULTI">/* Place the iframe shim behind the shadow element */</span>
<span class="coMULTI">/*
Adjust the dimensions of the <iframe> shim to match the shadow,
otherwise <select> elements will poke through the shadow.
*/</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-3px</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">3px</span> <span class="re3">3px</span> <span class="nu0">0</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax3-plain">#productsandservices .yui-menu .yui-shim {
z-index: -2; /* Place the iframe shim behind the shadow element */
/*
Adjust the dimensions of the <iframe> shim to match the shadow,
otherwise <select> elements will poke through the shadow.
*/
left: -3px;
padding: 3px 3px 0 3px;
}</textarea></div> </div>
<div class="yui-u sidebar">
<div id="examples" class="mod box4">
<div class="hd">
<h4>
MenuNav Node Plugin Examples:</h4>
</div>
<div class="bd">
<ul>
<li><a href='../node-menunav/node-menunav-1.html'>Basic Left Nav</a></li><li><a href='../node-menunav/node-menunav-2.html'>Basic Top Nav</a></li><li><a href='../node-menunav/node-menunav-3.html'>Menu Button Top Nav</a></li><li><a href='../node-menunav/node-menunav-4.html'>Split Button Top Nav</a></li><li class='selected'><a href='../node-menunav/node-menunav-5.html'>Left Nav With Submenus With Shadows</a></li><li><a href='../node-menunav/node-menunav-6.html'>Left Nav With Submenus With Rounded Corners</a></li><li><a href='../node-menunav/node-menunav-7.html'>Skinning Menus Created Using the MenuNav Node Plugin</a></li><li><a href='../node-menunav/node-menunav-8.html'>Adding Submenus On The Fly</a></li> </ul>
</div>
</div>
<div class="mod box4">
<div class="hd">
<h4>More MenuNav Node Plugin Resources:</h4>
</div>
<div class="bd">
<ul>
<!-- <li><a href="http://developer.yahoo.com/yui/node-menunav/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_node-menunav.html">API Documentation</a></li></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script language="javascript">
var yuiConfig = {base:"../../build/", timeout: 10000};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>