--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/node-menunav/index.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,929 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>MenuNav Node Plugin</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+ <a href="#toc" class="jump">Jump to Table of Contents</a>
+
+
+ <h1>MenuNav Node Plugin</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+ <p>
+ The MenuNav Node Plugin makes it easy to transform existing list-based
+ markup into traditional, drop down navigational menus that are both
+ accessible and easy to customize, and only require a small set of
+ dependencies. The MenuNav Node Plugin features:
+ </p>
+
+ <dl>
+ <dt>Progressive Enhancement</dt>
+ <dd>
+ The MenuNav Node Plugin is designed to support
+ <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a>,
+ making it easy to transform simple, semantic markup into dynamic
+ drop-down menus with just a few lines of JavaScript.
+ </dd>
+
+ <dt>Small footprint</dt>
+ <dd>
+ The MenuNav Node Plugin has a small footprint of ~5 KB (GZIP'd) and
+ requires a minimal set of dependencies.
+ </dd>
+
+ <dt>Accessibility & Usability Minded</dt>
+ <dd>
+ The MenuNav Node Plugin was built with both accessibility and usability
+ in mind. The MenuNav Node Plugin implements established mouse and
+ keyboard interaction patterns to deliver a user experience that is both
+ familiar and easy to use. To that foundation the MenuNav Node plugin
+ adds support for screen readers through the use of the
+ <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
+ </dd>
+
+ <dt>Easy to style and configure</dt>
+ <dd>
+ The MenuNav Node Plugin is easy to configure. The visual presentation
+ of menus is controlled completely via CSS. A handful of
+ straightforward <a href="#configuration-attributes">configuration attributes</a> can be used to make
+ common modifications to a menu's behavior.
+ </dd>
+
+ <dt><code><iframe></code> Shim for IE 6</dt>
+ <dd>
+ No menuing system would be complete without an
+ <code><iframe></code> to prevent <code><select></code> elements from poking through menus
+ in IE 6.
+ </dd>
+ </dl>
+</div>
+
+<div class="notice">
+ <p>
+ <strong>NOTICE</strong>: This component is <strong>deprecated</strong>
+ as of YUI 3.9.0 and will be removed in future versions.
+ </p>
+
+ <p>
+ If you require functionality similar to the one provided by this module, consider taking a look at the various modules in the <a href="http://yuilibrary.com/gallery/">YUI Gallery</a>.
+ </p>
+</div>
+
+<h2 id="getting-started">Getting Started</h2>
+
+<p>
+To include the source files for MenuNav Node Plugin and its dependencies, first load
+the YUI seed file if you haven't already loaded it.
+</p>
+
+<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre>
+
+
+<p>
+Next, create a new YUI instance for your application and populate it with the
+modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
+YUI will automatically load any dependencies required by the modules you
+specify.
+</p>
+
+<pre class="code prettyprint"><script>
+// Create a new YUI instance and populate it with the required modules.
+YUI().use('node-menunav', function (Y) {
+ // MenuNav Node Plugin is available and ready for use. Add implementation
+ // code here.
+});
+</script></pre>
+
+
+<p>
+For more information on creating YUI instances and on the
+<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
+documentation for the <a href="../yui/index.html">YUI Global Object</a>.
+</p>
+
+
+<p>
+<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
+page's <code><body></code> element or to a parent element of the widget in order to apply
+the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
+</p>
+
+<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
+
+
+<h3 id="setup">Basic Setup</h3>
+
+<p>
+To create a menu using the MenuNav Node Plugin, start by including the required markup. The markup
+for menus created using the MenuNav Node Plugin follows the same <a href="../widget/index.html#markup">pattern established for Widgets</a>,
+with each menu's content box containing one or more <code><ul></code> elements:
+</p>
+
+<h4 id="menu-markup-example">Menu Markup Example</h4>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+ <!-- Menu items -->
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>
+Menu items also follow the Widget markup pattern, with the root node defined using an
+<code><li></code> element:
+</p>
+
+<h4 id="menuitem-markup-example">MenuItem Markup Example</h4>
+
+<pre class="code prettyprint"><li class="yui3-menuitem"><!-- Bounding box -->
+ <a class="yui3-menuitem-content" href="http://www.yahoo.com"><!-- Content box -->
+ Yahoo!
+ </a>
+</li></pre>
+
+
+<p>
+Submenus are defined by wrapping the the menu markup in an <code><li></code> element. Each
+submenu must have have a label. The label should preceed the menu markup, and the label's
+<code>href</code> attribute should be set to the point to the id of its corresponding submenu.
+</p>
+
+<h4 id="submenu-markup-example">Submenu Markup Example</h4>
+
+<pre class="code prettyprint"><li>
+ <a class="yui3-menu-label" href="#submenu-1">Submenu Label</a><!-- Menu label -->
+ <div id="submenu-1" class="yui3-menu"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+ <!-- Menu items -->
+ </ul>
+ </div>
+ </div>
+</li></pre>
+
+
+<p>
+Following the patterns illustrated above, the markup for a menu created using the MenuNav Node
+Plugin comes together as follows:
+</p>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu"><!-- Root menu bounding box -->
+ <div class="yui3-menu-content"><!-- Root menu content box -->
+ <ul>
+ <li class="yui3-menuitem"><!-- Menuitem bounding box -->
+ <a class="yui3-menuitem-content" href="http://www.yahoo.com"><!-- Menuitem content box -->
+ Yahoo!
+ </a>
+ </li>
+ <li>
+ <a class="yui3-menu-label" href="#pim">PIM</a><!-- Submenu label -->
+ <div id="pim" class="yui3-menu"><!-- Submenu bounding box -->
+ <div class="yui3-menu-content"><!-- Submenu content box -->
+ <ul>
+ <li class="yui3-menuitem">
+ <a class="yui3-menuitem-content" href="http://mail.yahoo.com">Yahoo! Mail</a>
+ </li>
+ <li class="yui3-menuitem">
+ <a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Yahoo! Address Book</a>
+ </li>
+ <li class="yui3-menuitem">
+ <a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Yahoo! Calendar</a>
+ </li>
+ <li class="yui3-menuitem">
+ <a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Yahoo! Notepad</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>
+With the markup for the menu in place, simply get a Node reference for the root menu and then call
+the <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a> method, passing in a reference to the MenuNav Node Plugin.
+</p>
+
+<pre class="code prettyprint">// 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", function(Y) {
+
+ // Use the "contentready" event to initialize the menu when the subtree of
+ // element representing the root menu (<div id="menu-1">) is ready to
+ // be scripted.
+
+ Y.on("contentready", function () {
+
+ // The scope of the callback will be a Node instance representing
+ // the root menu (<div id="menu-1">). Therefore, since "this"
+ // represents a Node instance, it is possible to just call "this.plug"
+ // passing in a reference to the MenuNav Node Plugin.
+
+ this.plug(Y.Plugin.NodeMenuNav);
+
+ }, "#menu-1");
+
+});</pre>
+
+
+<h2 id="using">Using the MenuNav Node Plugin</h2>
+
+<h3 id="orientation-style-behavior">Orientation, Style and Behavior</h3>
+
+<h4 id="configuring-orientation">Configuring Orientation</h4>
+
+<p>
+The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
+orientation. The default orientation for menus is vertical, but can be easily switched to
+horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the
+root menu's bounding box, as illustrated in the following example:
+</p>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu yui3-menu-horizontal"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+ <!-- Menu items -->
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>
+Once the <code>yui3-menu-horizontal</code> class name is applied to the node representing the
+root menu's bounding box, the menu's keyboard interaction is automatically adjusted for a
+horizontal orientation. The default "Sam" skin provides the following default visualization for
+horizontal menus, as illustrated in the follow screen capture of a horizontal menu example:
+</p>
+
+<div class="wideimage"><img src="../assets/node-menunav/horizontal-menu.png" width="495" height="130" alt="Screenshot of a horizontal menu rendered with the default Sam Skin"></div>
+
+<h4 id="configuring-style-behavior">Configuring Style & Behavior</h4>
+
+<p>
+The default "Sam" skin provides two additional visualizations for horizontal menus, each of which
+can be applied by both changes to the menu label markup and through the application of a class to
+the node representing the root menu's bounding box.
+</p>
+
+<h5 id="menu-button-visualization">Menu Button Visualization</h5>
+
+<p>
+The first of the two optional horizontal menu visualizations available with the "Sam" skin renders
+each menu label as a menu button; each menu label is rendered with an arrow to the right
+of its text label, providing a visual cue that there is a corresponding submenu.
+</p>
+
+<div class="wideimage"><img src="../assets/node-menunav/menubutton-menu.png" width="495" height="130" alt="Screen capture of a horizontal menu with each menu label in the root menu rendered as menu buttons."></div>
+
+<p>
+To apply this style to a horizontal menu, start by adding the class <code>yui3-menubuttonnav</code>
+to the node representing the root menu's bounding box, as illustrated in the following example:
+</p>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+ <!-- Menu items -->
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>Next, wrap the text node of each menu label in an <code><em></code> element:</p>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+
+ <li>
+ <a class="yui3-menu-label" href="#submenu-1"><em>Submenu Label</em></a>
+ <div id="submenu-1" class="yui3-menu">
+ <div class="yui3-menu-content">
+
+ <!-- submenu content -->
+
+ </div>
+ </div>
+ </li>
+
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>
+As a final, optional step, use the
+<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeMenuNav.html#attr_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a>
+and <a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeMenuNav.html#attr_mouseOutHideDelay"><code>mouseOutHideDelay</code></a>
+configuration attributes to configure the menu labels to behave like menu buttons. Set the
+<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't
+made visible until the label is clicked. Set the <code>mouseOutHideDelay</code> to
+<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area
+outside of the submenu.
+</p>
+
+<pre class="code prettyprint">// 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", function(Y) {
+
+ // Use the "contentready" event to initialize the menu when the subtree of
+ // element representing the root menu (<div id="menu-1">) is ready to
+ // be scripted.
+
+ Y.on("contentready", function () {
+
+ // The scope of the callback will be a Node instance representing
+ // the root menu (<div id="menu-1">). Therefore, since "this"
+ // represents a Node instance, it is possible to just call "this.plug"
+ // passing in a reference to the MenuNav Node Plugin.
+
+ this.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
+
+ }, "#menu-1");
+
+});</pre>
+
+
+<h5 id="split-button-visualization">Split Button Visualization</h5>
+
+<p>
+The other optional horizontal menu visualization available with the "Sam" skin renders each menu
+label as a split button.
+</p>
+
+<div class="wideimage"><img src="../assets/node-menunav/splitbutton-menu.png" width="495" height="130" alt="Screen capture of a horizontal menu with each menu label in the root menu rendered as split buttons."></div>
+
+<p>To apply this style to a horizontal menu, start by adding the class
+<code>yui3-splitbuttonnav</code> to the node representing the root menu's bounding box, as
+illustrated in the following example:
+</p>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+ <!-- Menu items -->
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>
+Next, define the markup for each menu label. Start with a <code><span></code> with a class
+of <code>yui3-menu-label</code> applied. Inside the <code><span></code>, place two
+<code><a></code> elements — one for each of the label's two clickable regions.
+Each <code><a></code> has separate, but related responsibilities: The first
+<code><a></code> represents the label's default action. The second <code><a></code>
+toggles the display of a submenu whose content contains other options related to, or in the same
+category as the default action. Therefore to configure the first <code><a></code>,
+simply set its <code>href</code> attribute to any URL. For the second <code><a></code>,
+apply a class name of <code>yui3-menu-toggle</code>, and set the value of the <code>href</code>
+attribute to the id of the label's corresponding submenu. Lastly, the text node of the second
+<code><a></code> should label the contents of its corresponding submenu.
+</p>
+
+<pre class="code prettyprint"><div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
+ <div class="yui3-menu-content"><!-- Content box -->
+ <ul>
+ <li>
+
+ <span class="yui3-menu-label"><!-- menu label root node -->
+ <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action -->
+ <a href="#answers-options" class="yui3-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->
+ </span>
+
+ <div id="answers-options" class="yui3-menu">
+ <div class="yui3-menu-content">
+ <ul>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </li>
+ </ul>
+ </div>
+</div></pre>
+
+
+<p>
+Use the <a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeMenuNav.html#attr_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a>
+and <a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeMenuNav.html#attr_mouseOutHideDelay"><code>mouseOutHideDelay</code></a>
+configuration attributes to configure the menu labels to behave like split buttons. Set the
+<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't
+made visible until the menu trigger is clicked. Set the <code>mouseOutHideDelay</code> to
+<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area
+outside of the submenu.
+</p>
+
+<pre class="code prettyprint">// 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", function(Y) {
+
+ // Use the "contentready" event to initialize the menu when the subtree of
+ // element representing the root menu (<div id="menu-1">) is ready to
+ // be scripted.
+
+ Y.on("contentready", function () {
+
+ // The scope of the callback will be a Node instance representing
+ // the root menu (<div id="menu-1">). Therefore, since "this"
+ // represents a Node instance, it is possible to just call "this.plug"
+ // passing in a reference to the MenuNav Node Plugin.
+
+ this.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
+
+ }, "#menu-1");
+
+});</pre>
+
+
+<h5 id="menuitem-separators">MenuItem Separators</h5>
+
+<p>
+The MenuNav Node Plugin makes it easy to create separators between items in a menu.
+To separate items in a menu, simply place items in their own
+<code><ul></code> elements inside their parent menu's content box, and
+apply a class name of <code>first-of-type</code> to the first
+<code><ul></code>. The following code will render separators between
+the "Zimbra" and "Address Book" items, and the "Notepad" and "Messenger" items.
+</p>
+
+<pre class="code prettyprint"><div id="pim" class="yui3-menu">
+ <div class="yui3-menu-content">
+
+ <ul class="first-of-type">
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
+ </ul>
+
+ <ul>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
+ </ul>
+
+ <ul>
+ <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
+ </ul>
+
+ </div>
+</div></pre>
+
+
+<p>
+With the separator markup in place, the default "Sam" skin will render a top border between each
+<code><ul></code> element, as illustrated in the following screen capture of one of the
+MenuNav Node Plugin examples:
+</p>
+
+<div class="wideimage"><img src="../assets/node-menunav/menuitem-separators.png" width="495" height="250" alt="Screen capture of a horizontal menu"></div>
+
+<h3 id="styling-state">Styling State</h3>
+
+<p>
+The MenuNav Node Plugin manages the state of a menu's descendants through the application and
+removal of class names. Class names representing state are constructed using the descendent's
+name followed by a suffix representing the state. For example, hidden submenus have a class of
+<code>yui3-menu-hidden</code>. Class names used to represent state are always applied to the
+descendant's root node. See the <a href="#css-reference">CSS reference</a> for the complete list of state class
+names.
+</p>
+
+<h4 id="active-vs-inactive">Active vs. Inactive</h4>
+
+<p>
+Menuitems and menu labels have a default (inactive) state and an active state. Menuitems and
+menu labels are considered active when the user is interacting with them via the keyboard or the
+mouse. The active class name applied to menuitems and menu labels has two benefits: It provides
+a single entry point for styling state that would otherwise require the use of multiple CSS
+pseudo classes (<code>:hover</code> and <code>:focus</code>). The second benefit to the use of
+the active class name is that it provides consistent styling of state across all types of elements in
+all <a href="http://yuilibrary.com/yui/docs/tutorials/gbs/">supported browsers</a>.
+(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.)
+</p>
+
+<h4 id="visible-vs-hidden">Visible vs. Hidden</h4>
+
+<p>
+By default all submenus are hidden and that state is reflected by the application of the
+<code>yui3-menu-hidden</code> class name. If the <code>yui3-menu-hidden</code> class name is not
+applied to the bounding box node of all submenus, it will automatically be applied by the MenuNav's
+constructor. When a submenu is visible, the <code>yui3-menu-hidden</code> class name is removed
+and a class <code>yui3-menu-label-menuvisible</code> is applied to the submenu's corresponding label.
+</p>
+
+<h3 id="configuration-attributes">Configuration Attributes</h3>
+
+<p>
+The MenuNav Node Plugin has several configuration attributes that can be set via an object literal
+that is passed as a second argument to a Node instance's
+<a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a> method. (<em>Note:</em> These
+attributes are <em>case sensitive</em>.) In the following example, the value of the
+<code>mouseOutHideDelay</code> attribute is set to 1000.
+</p>
+
+<pre class="code prettyprint">var oMenuNav = Y.one("#productsandservices");
+oMenuNav.plug(Y.Plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });</pre>
+
+
+<p>The complete list of the MenuNav Node Plugin configuration attributes are:</p>
+
+<table>
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Default Value</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr id="usearia">
+ <td>useARIA</td>
+ <td>True</td>
+ <td>Boolean indicating if use of the WAI-ARIA Roles and States should be enabled for the MenuNav. Set to true by default for Firefox 3 and Internet Explorer 8 as currently only these browsers have support for ARIA, and are supported by several screen readers for Windows that also offer support for ARIA.</td>
+ </tr>
+ <tr id="autosubmenudisplay">
+ <td>autoSubmenuDisplay</td>
+ <td>True</td>
+ <td>Boolean indicating if submenus are automatically made visible when the user mouses over the menu's items.</td>
+ </tr>
+ <tr id="submenushowdelay">
+ <td>submenuShowDelay</td>
+ <td>250</td>
+ <td>Number indicating the time (in milliseconds) that should expire before a submenu is made visible when the user mouses over the menu's label. </td>
+ </tr>
+ <tr id="submenuhidedelay">
+ <td>submenuHideDelay</td>
+ <td>250</td>
+ <td>Number indicating the time (in milliseconds) that should expire before a submenu is hidden when the user mouses out of a menu label heading in the direction of a submenu.</td>
+ </tr>
+ <tr id="mouseouthidedelay">
+ <td>mouseOutHideDelay</td>
+ <td>750</td>
+ <td>Number indicating the time (in milliseconds) that should expire before a submenu is hidden when the user mouses out of it.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="handling-events">Handling Events</h3>
+
+<p>
+The MenuNav Node Plugin publishes no custom events of its own. To listen for any DOM-related
+events for a menu built using the MenuNav Node Plugin, use the <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_on"><code>on</code></a> method of the
+plugin's host Node instance. The following example illustrates how to listen for the
+<code>click</code> event of menu a built using the MenuNav Node Plugin:
+</p>
+
+<pre class="code prettyprint">// Get a Node instance for HTML element
+var oMenuNode = Y.one("#menu-nav-1");
+
+// Apply the MenuNav Node Plugin to the Node instance
+oMenuNode.plug(Y.Plugin.NodeMenuNav);
+
+// Register a "click" event listener to the Node instance using the "on" method
+oMenuNode.on("click", function () {
+
+ alert("here");
+
+});</pre>
+
+
+<p>For additional information on listening for DOM-related events, see the
+<a href="../node/index.html#node-events">DOM Events</a> section of the
+<a href="../node/index.html">Node landing page</a>.
+</p>
+
+<h3 id="iframe-shim"><code><iframe></code> Shim</h3>
+
+<p>
+The MenuNav Node Plugin uses an <code><iframe></code> shim to prevent
+<code><select></code> elements from poking through submenus in IE 6. The
+<code><iframe></code> shim is only used for IE 6, and for performance its creation is
+deferred until the first time a submenu is made visible.
+</p>
+
+<p>
+Once created, the
+<code><iframe></code> shim is appended to the node representing a submenu's bounding box,
+and is therefore a sibling of the the a submenu's content box. All styling of the
+<code><iframe></code> is handled by the core CSS file for the MenuNav Node Plugin, so
+authors of custom skins won't have to worry about it. The markup template used to create each
+<code><iframe></code> is accessible via the
+<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeMenuNav.html#property_NodeMenuNav.SHIM_TEMPLATE"><code>SHIM_TEMPLATE</code></a> property.
+</p>
+
+<p>
+To help users of screen readers to avoid mistakenly interacting with the
+<code><iframe></code> shim, its <code>tabindex</code> attribute is set to "-1" and its
+title attribute is set to "Menu Stacking Shim". The value of the <code><iframe></code>'s
+<code>title</code> attribute is available via the
+<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeMenuNav.html#property_NodeMenuNav.SHIM_TEMPLATE_TITLE"><code>SHIM_TEMPLATE_TITLE</code></a>
+property for easy localization. Lastly, the <code>src</code> attribute of the
+<code><iframe></code> is set to "javascript:false;" so that it won't load a
+page inside it, preventing the secure/nonsecure warning in IE when using the MenuNav Node Plugin
+with HTTPS.
+</p>
+
+<h2 id="css-reference">CSS reference</h2>
+
+<table>
+ <thead>
+ <tr>
+ <th>Class Name</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>yui3-menu</td>
+ <td>Applied to the element representing a menu's bounding box.</td>
+ </tr>
+ <tr>
+ <td>yui3-menu-content</td>
+ <td>Applied to the element representing a menu's content box.</td>
+ </tr>
+ <tr>
+ <td>yui3-menu-hidden</td>
+ <td>Applied to a menu's bounding box when hidden.</td>
+ </tr>
+ <tr>
+ <td>yui3-shim</td>
+ <td>Applied to the element serving as a menu's shim.</td>
+ </tr>
+ <tr>
+ <td>yui3-menu-horizontal</td>
+ <td>Renders a menu horizontally. Applied to a menu's bounding box element.</td>
+ </tr>
+ <tr>
+ <td>yui3-menu-label</td>
+ <td>Applied to the element representing a menu's label.</td>
+ </tr>
+ <tr>
+ <td>yui3-menu-label-active</td>
+ <td>Applied to a menu's label when it is a MenuNav's active descendent.</td>
+ </tr>
+ <tr>
+ <td>yui3-menu-label-menuvisible</td>
+ <td>Applied to a menu's label when its corresponding menu is visible.</td>
+ </tr>
+ <tr>
+ <td>yui3-menuitem</td>
+ <td>Applied to the element representing a menuitem's bounding box.</td>
+ </tr>
+ <tr>
+ <td>yui3-menuitem-content</td>
+ <td>Applied to the element representing a menuitem's content box.</td>
+ </tr>
+ <tr>
+ <td>yui3-menuitem-active</td>
+ <td>Applied to a menuitem when it is a MenuNav's active descendent.</td>
+ </tr>
+ <tr>
+ <td>first-of-type</td>
+ <td>
+ Applied to the first <code><ul></code> element inside each menu's
+ content box.
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="known-issues">Known Issues</h2>
+
+<ul>
+ <li><strong>Open <code><select></code>-based menus poke through submenus of a menu
+ created using the MenuNav Node Plugin</strong>
+
+ <p>
+ <img src="../assets/node-menunav/select-issue.png" style="width:370px; height:257px; float:right;" alt="Screen capture of an open HTML select-based menu poking through the submenu of a menu created using the MenuNav Node Plugin">
+ In Safari 3 and IE 6 the <code><select></code> element's
+ popup menu is modal—making it impossible to interact with any
+ of the other elements on the page, and therefore impossible to both
+ trigger the display of a DHTML menu and impossible for the
+ <code><select></code> element's popup menu to potentially
+ poke through a DHTML menu.
+ </p>
+ <p>
+ In all other browsers, a <code><select></code> element's
+ popup menu is both <em>not</em> modal and has a zindex higher than
+ any other element. The established best practice of using an
+ <code><iframe></code> element has a shim does not fix the
+ problem. Currently there is no fix for this issue.
+ </p>
+ </li>
+</ul>
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+ <div id="toc" class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Table of Contents</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="toc">
+<li>
+<a href="#getting-started">Getting Started</a>
+<ul class="toc">
+<li>
+<a href="#setup">Basic Setup</a>
+<ul class="toc">
+<li>
+<a href="#menu-markup-example">Menu Markup Example</a>
+</li>
+<li>
+<a href="#menuitem-markup-example">MenuItem Markup Example</a>
+</li>
+<li>
+<a href="#submenu-markup-example">Submenu Markup Example</a>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>
+<a href="#using">Using the MenuNav Node Plugin</a>
+<ul class="toc">
+<li>
+<a href="#orientation-style-behavior">Orientation, Style and Behavior</a>
+<ul class="toc">
+<li>
+<a href="#configuring-orientation">Configuring Orientation</a>
+</li>
+<li>
+<a href="#configuring-style-behavior">Configuring Style & Behavior</a>
+<ul class="toc">
+<li>
+<a href="#menu-button-visualization">Menu Button Visualization</a>
+</li>
+<li>
+<a href="#split-button-visualization">Split Button Visualization</a>
+</li>
+<li>
+<a href="#menuitem-separators">MenuItem Separators</a>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>
+<a href="#styling-state">Styling State</a>
+<ul class="toc">
+<li>
+<a href="#active-vs-inactive">Active vs. Inactive</a>
+</li>
+<li>
+<a href="#visible-vs-hidden">Visible vs. Hidden</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#configuration-attributes">Configuration Attributes</a>
+</li>
+<li>
+<a href="#handling-events">Handling Events</a>
+</li>
+<li>
+<a href="#iframe-shim"><code><iframe></code> Shim</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#css-reference">CSS reference</a>
+</li>
+<li>
+<a href="#known-issues">Known Issues</a>
+</li>
+</ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Creating left navigation using the MenuNav Node Plugin.">
+ <a href="menunav-leftnav.html">Basic Left Nav</a>
+ </li>
+
+
+
+ <li data-description="Creating top navigation using the MenuNav Node Plugin">
+ <a href="node-menunav-2.html">Basic Top Nav</a>
+ </li>
+
+
+
+ <li data-description="Creating menu button navigation using the MenuNav Node Plugin">
+ <a href="node-menunav-3.html">Menu Button Top Nav</a>
+ </li>
+
+
+
+ <li data-description="Creating split button navigation using the MenuNav Node Plugin">
+ <a href="node-menunav-4.html">Split Button Top Nav</a>
+ </li>
+
+
+
+ <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin">
+ <a href="node-menunav-5.html">Left Nav with Submenus with Shadows</a>
+ </li>
+
+
+
+ <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin">
+ <a href="node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>
+ </li>
+
+
+
+ <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr">
+ <a href="node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/node-menunav',
+ name: 'node-menunav',
+ title: 'MenuNav Node Plugin',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('menunav-leftnav');
+YUI.Env.Tests.examples.push('node-menunav-2');
+YUI.Env.Tests.examples.push('node-menunav-3');
+YUI.Env.Tests.examples.push('node-menunav-4');
+YUI.Env.Tests.examples.push('node-menunav-5');
+YUI.Env.Tests.examples.push('node-menunav-6');
+YUI.Env.Tests.examples.push('node-menunav-7');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>