<!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: Adding Submenus On The Fly</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: Adding Submenus On The Fly</h1></div>
</div>
<div id="bd">
<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>MenuNav Node Plugin: Adding Submenus On The Fly</h2>
<div id="example" class="promo">
<p>
<p>
This example demonstrates how to use the <a href="../../io/">IO Utility</a> to
add submenus to a menu built using the MenuNav Node Plugin.
</p>
</p>
<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-8_source.html" target="_blank">View example in new window.</a>
</span>
</span>
</p>
</div>
</div>
</div>
<h3>Design Goal</h3>
<p>
This menu will be created using the
<a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a> design
pattern, so that the accessibility of the menu can be tailored based on the capabilities of
the user's browser. The goal is to design a menu that satisfies each of the following use cases:
</p>
<table class="yui-table">
<thead>
<tr>
<th><a href="http://developer.yahoo.com/yui/articles/gbs/">Browser Grade</a></th>
<th>Technologies</th>
<th>User Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>C</td>
<td>HTML</td>
<td>The user is using a browser for which CSS and JavaScript are being withheld.</td>
</tr>
<tr>
<td>A</td>
<td>HTML + CSS</td>
<td>The user is using an A-Grade browser, but has chosen to disable JavaScript.</td>
</tr>
<tr>
<td>A</td>
<td>HTML + CSS + JavaScript</td>
<td>The user is using an A-Grade browser with CSS and JavaScript enabled.</td>
</tr>
<tr>
<td>A</td>
<td>HTML + CSS + JavaScript + ARIA</td>
<td>
The user is using an ARIA-capable, A-Grade browser with CSS and
JavaScript enabled.
</td>
</tr>
</tbody>
</table>
<p>
The MenuNav Node Plugin helps support most of the these use cases out of the box. By using an
established, semantic, list-based pattern for markup, the core, C-grade experience is easily
cemented using the MenuNav Node Plugin. Using JavaScript, the MenuNav Node Plugin implements
established mouse and keyboard interaction patterns to deliver a user experience that is both
familiar and easy to use, as well as support for the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>, making it easy to satisfy
the last two use cases. The second is the only use case that <em>is not</em> handled out of the box
when using the MenuNav Node Plugin.
</p>
<p>
One common solution to making a menuing system work when CSS is enabled, but JavaScript is
disabled is to leverage the <code>:hover</code> and <code>:focus</code> pseudo classes to provide
support for both the mouse and the keyboard. However, there are a couple of problems with this
approach:
</p>
<dl>
<dt>Inconsistent Browser Support</dt>
<dd>
IE 6 only supports the <code>:hover</code> and <code>:focus</code> pseudo classes on
<code><a></code> elements. And while IE 7 supports <code>:hover</code> on all
elements, it only supports <code>:focus</code> pseudo class on <code><a></code>
elements. This solution won't work if the goal is to provide a consistent user
experience across all of the
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a> when
JavaScript is disabled.
</dd>
<dt>Poor User Experience</dt>
<dd>
Even if the <code>:hover</code> and <code>:focus</code> pseudo classes were supported
consistently across all
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a>, it
would be a solution that would work, <em>but wouldn't work well</em>. Use of
the <code>:focus</code> pseudo class to enable keyboard support for a menu results in an
unfamiliar, potentially cumbersome experience for keyboard users. Having a menu
appear in response to its label simply being focused isn't an established interaction
pattern for menus on the desktop, and implementing that pattern could result in menus that
popup unexpectedly, and as a result, have the potential to get in the user's way. While use of the
<code>:hover</code> pseudo class can be used to show submenus in response to a
<code>mouseover</code> event, it doesn't allow the user to move diagonally from a label to
its corresponding submenu — an established interaction pattern that greatly improves a
menu's usability.
</dd>
<dt>Bloats Code</dt>
<dd>
Relying on <code>:hover</code> and <code>:focus</code> as an intermediate solution when
JavaScript is disabled adds bloat to a menu's CSS. And relying on these pseudo classes
would also likely mean additional code on the server to detect IE, so that submenu HTML
that is inaccessible to IE users with JavaScript disabled is not delivered to the browser.
</dd>
</dl>
<p>
As the functionality for displaying submenus cannot be implemented in CSS to work
consistently and well in all
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a>, then that
functionality is better implemented using JavaScript. And if submenus are only accessible if
JavaScript is enabled, then it is best to only add the HTML for submenus via JavaScript. Adding
submenus via JavaScript has the additional advantage of speeding up the initial load time of
a page.
</p>
<h3>Approach</h3>
<p>
The approach for this menu will be to create horizontal top navigation that, when JavaScript is
enabled, is enhanced into split buttons. The content of each submenu is functionality that is
accessible via the page linked from the anchor of each submenu's label. Each submenu is purely
sugar — a faster means of accessing functionality that is accessible via another path.
</p>
<h3>Setting Up the HTML</h3>
<p>
Start by providing the markup for the root horizontal menu, following the pattern outlined in the
<a href="node-menunav-4.html">Split Button Top Nav</a> example, minus the application of the
<code>yui-splitbuttonnav</code> class to the menu's bounding box, the markup for the submenus,
and the <code><a href="…" class="yui-menu-toggle"></code> elements inside each label
that toggle each submenu's display. Include the MenuNav Node Plugin CSS in the
<code><head></code> so that menu is styled even if JS is disabled. The following
illustrates what the initial menu markup:
</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="productsandservices" class="yui-menu yui-menu-horizontal">
<div class="yui-menu-content">
<ul>
<li>
<span id="answers-label" class="yui-menu-label">
<a href="http://answers.yahoo.com">Answers</a>
</span>
</li>
<li>
<span id="flickr-label" class="yui-menu-label">
<a href="http://www.flickr.com">Flickr</a>
</span>
</li>
<li>
<span id="jumpcut-label" class="yui-menu-label">
<a href="http://www.jumpcut.com/">Jumpcut</a>
</span>
</li>
<li>
<span id="mobile-label" class="yui-menu-label">
<a href="http://mobile.yahoo.com">Mobile</a>
</span>
</li>
<li>
<span id="upcoming-label" class="yui-menu-label">
<a href="http://upcoming.yahoo.com/">Upcoming</a>
</span>
</li>
<li>
<span id="forgood-label" class="yui-menu-label">
<a href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a>
</span>
</li>
</ul>
</div>
</div>
</textarea>
<h3>Setting Up the script</h3>
<p>
With the core markup for the menu in place, JavaScript will be responsible for transforming the
simple horizontal menu into top navigation rendered like split buttons. The script will
appended a submenu toggle to each menu label as well as add the <code>yui-splitbuttonnav</code>
class to the menu's bounding box. Each submenu's label will be responsible for creating its
corresponding submenu the first time its display is requested by the user. The content of each
submenu is fetched asynchronously using <code>Y.io</code>.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// 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().use("node-menunav", "io", function(Y) {
var applyARIA = function (menu) {
var oMenuLabel,
oMenuToggle,
sID;
menu.set("role", "menu");
oMenuLabel = menu.previous();
oMenuToggle = oMenuLabel.query(".yui-menu-toggle");
if (oMenuToggle) {
oMenuLabel = oMenuToggle;
}
sID = Y.stamp(oMenuLabel);
if (!oMenuLabel.get("id")) {
oMenuLabel.set("id", sID);
}
menu.set("aria-labelledby", sID);
menu.queryAll("ul,li,.yui-menu-content").set("role", "presentation");
menu.queryAll(".yui-menuitem-content").set("role", "menuitem");
};
var onIOComplete = function (transactionID, response, submenuNode) {
var sHTML = response.responseText;
submenuNode.query(".yui-menu-content").set("innerHTML", sHTML);
submenuNode.query("ul").addClass("first-of-type");
applyARIA(submenuNode);
// Need to set the width of the submenu to "" to clear it, then to nothing
// (or the offsetWidth for IE < 8) so that the width of the submenu is
// rendered correctly, otherwise the width will be rendered at the width
// before the new content for the submenu was loaded.
submenuNode.setStyle("width", "");
if (Y.UA.ie && Y.UA.ie < 8) {
submenuNode.setStyle("width", (submenuNode.get("offsetWidth") + "px"));
}
var oAnchor = submenuNode.query("a");
if (oAnchor) {
oAnchor.focus();
}
};
var addSubmenu = function (event, submenuIdBase) {
var oSubmenuNode,
sSubmenuId = submenuIdBase + "-options",
bIsKeyDown = (event.type === "keydown"),
nKeyCode = event.keyCode,
sURI;
if ((bIsKeyDown && nKeyCode === 40) ||
(event.target.hasClass("yui-menu-toggle") &&
(event.type === "mousedown" || (bIsKeyDown && nKeyCode === 13)))) {
// Build the bounding box and content box for the submenu and fill
// the content box with a "Loading..." message so that the user
// knows the submenu's content is in the process of loading.
oSubmenuNode = Y.Node.create('<div id="' + sSubmenuId + '" class="yui-menu yui-menu-hidden"><div class="yui-menu-content"><p>Loading…</p></div></div>');
this.get("parentNode").appendChild(oSubmenuNode);
// Use Y.io to fetch the content of the submenu
sURI = "assets/submenus.php?menu=" + sSubmenuId;
Y.io(sURI, { on: { complete: onIOComplete }, arguments: oSubmenuNode });
// Detach event listeners so that this code runs only once
this.detach("mousedown", addSubmenu);
this.detach("keydown", addSubmenu);
}
};
// Retrieve the Node instance representing the root menu
// (<div id="productsandservices">)
var menu = Y.Node.get("#productsandservices");
menu.addClass("yui-splitbuttonnav");
var oSubmenuToggles = {
answers: { label: "Answers Options", url: "#answers-options" },
flickr: { label: "Flickr Options", url: "#flickr-options" },
jumpcut: { label: "Jumpcut Options", url: "#jumpcut-options" },
mobile: { label: "Mobile Options", url: "#mobile-options" },
upcoming: { label: "Upcoming Options", url: "#upcoming-options" },
forgood: { label: "Yahoo! for Good Options", url: "#forgood-options" }
},
sKey,
oToggleData,
oSubmenuToggle;
// Add the menu toggle to each menu label
menu.queryAll(".yui-menu-label").each(function(node) {
sKey = node.get("id").split("-")[0];
oToggleData = oSubmenuToggles[sKey];
oSubmenuToggle = Y.Node.create('<a class="yui-menu-toggle">' + oToggleData.label + '</a>');
// Need to set the "href" attribute via the "set" method as opposed to
// including it in the string passed to "Y.Node.create" to work around a
// bug in IE. The MenuNav Node Plugin code examines the "href" attribute
// of all <A>s in a menu. To do this, the MenuNav Node Plugin retrieves
// the value of the "href" attribute by passing "2" as a second argument
// to the "getAttribute" method. This is necessary for IE in order to get
// the value of the "href" attribute exactly as it was set in script or in
// the source document, as opposed to a fully qualified path. (See
// http://msdn.microsoft.com/en-gb/library/ms536429(VS.85).aspx for
// more info.) However, when the "href" attribute is set inline via the
// string passed to "Y.Node.create", calls to "getAttribute('href', 2)"
// will STILL return a fully qualified URL rather than the value of the
// "href" attribute exactly as it was set in script.
oSubmenuToggle.set("href", oToggleData.url);
// Add a "mousedown" and "keydown" listener to each menu label that
// will build the submenu the first time the users requests it.
node.on("mousedown", addSubmenu, node, sKey);
node.on("keydown", addSubmenu, node, sKey);
node.appendChild(oSubmenuToggle);
});
// Call the "plug" method passing in a reference to the
// MenuNav Node Plugin.
menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
});
</textarea>
<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> </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><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 class='selected'><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.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</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="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</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</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</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="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</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</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="History - Functional Examples" href="../../examples/history/index.html">History</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="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</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</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</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</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</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</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">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (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><li class="sect">YUI Articles on the YUI Website</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="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (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 src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>