<!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 Rounded Corners</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 Rounded Corners</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 Rounded Corners</h2>
<div id="example" class="promo">
<div class="example-intro">
<p>
This example demonstrates how to add rounded corners 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-6_source.html" target="_blank">View example in new window.</a>
</span>
</span>
</p>
</div>
</div>
</div>
<h3>Creating the Rounded Corner HTML</h3>
<p>
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.
</p>
<p>
Each rounded corner is created by applying a background image to a <code><div></code>.
A class name identifying the corner will be added to each <code><div></code>.
The <code><div></code>s used to create the right corners will be nested inside the
<code><div></code>s used to create the left corners, and each <code><div></code>
for the left corners will have an additional class name of <code>yui-menu-corner</code>. The
template for each set of rounded corners comes together as follows:
</p>
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc-1"><!-- top-left and top-right corners --></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner yui-menu-corner-tl"</span>><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner-tr"</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="sc-1"><!-- bottom-left and bottom-right corners --></span></div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner yui-menu-corner-bl"</span>><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner-br"</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc-1"><!-- top-left and top-right corners --></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner yui-menu-corner-tl"</span>><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner-tr"</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc-1"><!-- bottom-left and bottom-right corners --></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner yui-menu-corner-bl"</span>><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-menu-corner-br"</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax1-plain"><!-- 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></textarea></div>
<p>
The <code><div></code>s for each corner is 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> and
<a href="../../api/Node.html#method_prepend"><code>prepend</code></a>
methods to add the rounded corners <code><div></code>s to the bounding box of each submenu.
</p>
<div id="syntax2" 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">// Add decorator elements used to create the rounded corners to the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// bounding box of each submenu.</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Insert the first decorator before the submenu's content box</span></div></li><li class="li1"><div class="de1"> node.<span class="me1">prepend</span><span class="br0">(</span><span class="st0">'<div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></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="co1">// Insert the second decorator after the submenu's content box</span></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-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></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">// Add decorator elements used to create the rounded corners to the</span>
<span class="co1">// bounding box of each submenu.</span>
<span class="co1">// Insert the first decorator before the submenu's content box</span>
node.<span class="me1">prepend</span><span class="br0">(</span><span class="st0">'<div class="yui-menu-corner yui-menu-corner-tl"><div class="yui-menu-corner-tr"></div></div>'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Insert the second decorator after the submenu's content box</span>
node.<span class="me1">append</span><span class="br0">(</span><span class="st0">'<div class="yui-menu-corner yui-menu-corner-bl"><div class="yui-menu-corner-br"></div></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="syntax2-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) {
// 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");
});</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>Create the Rounded Corner Background Image</h3>
<p>
For performance, each rounded corner <code><div></code> uses the same image as its
background image, but only reveals the relevant section of the image via the
<code>background-position</code> property. The complete image is as follows:
</p>
<img src="assets//round.png" width="200" height="6" alt="Image used as the background image for the DIV elements used to create rounded corners">
<h3>Styling the Rounded Corner HTML</h3>
<p>
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
<code>border</code> and <code>padding</code> 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 <code><div></code> inside the
<code><div class="yui-menu-corner"></code>.
</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="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Overide the values for border and padding specified for the content box of each submenu in</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> the Sam skin CSS. The top and bottom borders are set to 0, since both borders will be drawn</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> by the background image used to create the rounded corners. The top and bottom padding</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> will be created by setting the height of each <div> inside the</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> <div class="yui-menu-corner">.</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="li1"><div class="de1"><span class="re0">#productsandservices</span> <span class="re1">.yui-menu</span> <span class="re1">.yui-menu-content</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">border-top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/*
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">.
*/</span>
<span class="re0">#productsandservices</span> <span class="re1">.yui-menu</span> <span class="re1">.yui-menu-content</span> <span class="br0">{</span>
<span class="kw1">border-top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax3-plain">/*
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;
}</textarea></div>
<p>
Next, define the styles for each corner element. The <code><div></code>s for the top-left
and bottom-left corners define a right margin that will provide space for the their inner
<code><div></code>s to fill using a negative right margin. Each inner
<code><div></code> will define a left margin to reveal the background image applied to
its parent <code><div></code>.
</p>
<div id="syntax4" 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-corner</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span> <span class="coMULTI">/* Reserve space for the top-right and bottom-right corners. */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/* The background image (sprite) for the top-left and bottom-left corners. */</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">assets/round.png</span><span class="br0">)</span> <span class="kw2">no-repeat</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><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="re1">.yui-menu-corner</span> div <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-4px</span> <span class="nu0">0</span> <span class="re3">4px</span><span class="sy0">;</span> <span class="coMULTI">/* Use a negative right margin to move the <div> into</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> the right margin of the parent element</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> (<div class="yui-menu-corner">) to draw the top-right</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> and bottom-right corners.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI"> Apply a left margin to reveal the background image</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> applied to the parent element for the top-left and</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> bottom-left corners. */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/* The background image (sprite) for the top-right and bottom-right corners. */</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">assets/round.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> _position<span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="coMULTI">/* Necessary to get negative margins working in IE 6</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> (Standards Mode and Quirks Mode and IE 7 (Quirks</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Mode only). */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> _font-<span class="kw1">size</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="coMULTI">/* Necessary to collapse the height of the <div> in IE 6</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> that it renders at 4px tall. */</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-corner</span> <span class="br0">{</span>
<span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span> <span class="coMULTI">/* Reserve space for the top-right and bottom-right corners. */</span>
<span class="coMULTI">/* The background image (sprite) for the top-left and bottom-left corners. */</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">assets/round.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-menu-corner</span> div <span class="br0">{</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-4px</span> <span class="nu0">0</span> <span class="re3">4px</span><span class="sy0">;</span> <span class="coMULTI">/* 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. */</span>
<span class="coMULTI">/* The background image (sprite) for the top-right and bottom-right corners. */</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">assets/round.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span>
_position<span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="coMULTI">/* Necessary to get negative margins working in IE 6
(Standards Mode and Quirks Mode and IE 7 (Quirks
Mode only). */</span>
_font-<span class="kw1">size</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="coMULTI">/* 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. */</span>
<span class="br0">}</span></pre></div><textarea id="syntax4-plain">.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. */
}</textarea></div>
<p>
The last step is to simply set <code>background-position</code> property for the bottom-left,
top-right, and bottom-right corner elements to reveal the corresponding section of the corner
background image.
</p>
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> Set the "background-position" property for the bottom-left, top-right, and</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> bottom-right corner elements to reveal the corresponding section of the corner</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> background image.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI">*/</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-menu-corner-bl</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="kw1">left</span> <span class="kw1">bottom</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-menu-corner</span> <span class="re1">.yui-menu-corner-tr</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="kw1">top</span> <span class="kw1">right</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><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-menu-corner</span> <span class="re1">.yui-menu-corner-br</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="kw1">right</span> <span class="kw1">bottom</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="coMULTI">/*
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.
*/</span>
<span class="re1">.yui-menu-corner-bl</span> <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="kw1">left</span> <span class="kw1">bottom</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-menu-corner</span> <span class="re1">.yui-menu-corner-tr</span> <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="kw1">top</span> <span class="kw1">right</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-menu-corner</span> <span class="re1">.yui-menu-corner-br</span> <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="kw1">right</span> <span class="kw1">bottom</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax5-plain">/*
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;
}</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><a href='../node-menunav/node-menunav-5.html'>Left Nav With Submenus With Shadows</a></li><li class='selected'><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>