diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/node-menunav/node-menunav-3.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/node-menunav/node-menunav-3.html Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,272 @@ + + + + + YUI Library Examples: MenuNav Node Plugin: Menu Button Top Nav + + + + + + + + + + + + + + +
+
+
+

+ + YUI 3.x Home - + +

+
+ + +
+ + + +
+
+
+
+

YUI Library Examples: MenuNav Node Plugin: Menu Button Top Nav

+
+
+ + +
+
+
+
+ +

MenuNav Node Plugin: Menu Button Top Nav

+ +
+
+

+This example demonstrates how to create a traditional, two-column page layout +(using Grids) with top navigation rendered like menu buttons. +

+
+ +
+
+ +

+ + + View example in new window. + + +

+ + +
+
+
+ +

Setting Up the HTML

+

+Begin by including the CSS Grids dependencies and placing +the markup for the two-column Grid on the page (this example uses the +100% Centered Page Width with the +Preset Template 1 that provides a 160px left column). +Add the markup for the menu to the right column of the grid, and the class yui-skin-sam +to the <body>. +

+ +

+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 yui-menu-horizontal to the node representing the +root menu's bounding box, as illustrated below: +

+ +
  1. <div id="productsandservices" class="yui-menu yui-menu-horizontal"><!-- Bounding box -->
  2.     <div class="yui-menu-content"><!-- Content box -->
  3.         <ul>
  4.             <!-- Menu items -->
  5.         </ul>
  6.     </div>
  7. </div>
<div id="productsandservices" class="yui-menu yui-menu-horizontal"><!-- Bounding box -->
+    <div class="yui-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+

+To render each menu label in the horizontal menu as a menu button, add the class +yui-menubuttonnav to the node representing the root menu's bounding box, as +illustrated below: +

+ +
  1. <div id="menu-1" class="yui-menu yui-menu-horizontal yui-menubuttonnav"><!-- Bounding box -->
  2.     <div class="yui-menu-content"><!-- Content box -->
  3.         <ul>
  4.             <!-- Menu items -->
  5.         </ul>
  6.     </div>
  7. </div>
<div id="menu-1" class="yui-menu yui-menu-horizontal yui-menubuttonnav"><!-- Bounding box -->
+    <div class="yui-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+

+Next, wrap the text node of each menu label of the root menu in an +<em> element: +

+ +
  1. <div id="menu-1" class="yui-menu yui-menu-horizontal yui-menubuttonnav"><!-- Bounding box -->
  2.     <div class="yui-menu-content"><!-- Content box -->
  3.         <ul>
  4.  
  5.             <li>
  6.                 <a class="yui-menu-label" href="#submenu-1"><em>Submenu Label</em></a>
  7.                 <div id="submenu-1" class="yui-menu">
  8.                     <div class="yui-menu-content">
  9.  
  10.                         <!-- submenu content -->
  11.  
  12.                     </div>
  13.                 </div>
  14.             </li>
  15.  
  16.         </ul>
  17.     </div>
  18. </div>
<div id="menu-1" class="yui-menu yui-menu-horizontal yui-menubuttonnav"><!-- Bounding box -->
+    <div class="yui-menu-content"><!-- Content box -->
+        <ul>
+ 
+            <li>
+                <a class="yui-menu-label" href="#submenu-1"><em>Submenu Label</em></a>
+                <div id="submenu-1" class="yui-menu">
+                    <div class="yui-menu-content">
+ 
+                        <!-- submenu content -->
+ 
+                    </div>
+                </div>
+            </li>
+ 
+        </ul>
+    </div>
+</div>
+ +

Initializing the Menu

+

+With the menu markup in place, retrieve the Node instance representing the root +menu (<div id="productsandservices">) and call the +plug +passing in a reference to the MenuNav Node Plugin. +

+ +
  1. //  Call the "use" method, passing in "node-menunav".  This will load the
  2. //  script and CSS for the MenuNav Node Plugin and all of the required
  3. //  dependencies.
  4.  
  5. YUI({base:"../../build/", timeout: 10000}).use("node-menunav", function(Y) {
  6.  
  7.     //  Retrieve the Node instance representing the root menu
  8.     //  (<div id="productsandservices">) and call the "plug" method
  9.     //  passing in a reference to the MenuNav Node Plugin.
  10.  
  11.     var menu = Y.one("#productsandservices");
  12.  
  13.     menu.plug(Y.Plugin.NodeMenuNav);
  14.  
  15. });
//  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">) and call the "plug" method
+    //  passing in a reference to the MenuNav Node Plugin.
+ 
+    var menu = Y.one("#productsandservices");
+ 
+    menu.plug(Y.Plugin.NodeMenuNav);
+ 
+});
Note: In keeping with the +Exceptional Performance +team's recommendation, the script block used to instantiate the menu will be +placed at the bottom of the page. +This not only improves performance, it helps ensure that the DOM subtree of the +element representing the root menu +(<div id="productsandservices">) is ready to be scripted. +

+
+ + + + +
+
+

More MenuNav Node Plugin Resources:

+
+
+ +
+
+
+
+ +
+
+ + + +
+ +
+

Copyright © 2009 Yahoo! Inc. All rights reserved.

+

Privacy Policy - + Terms of Service - + Copyright Policy - + Job Openings

+
+
+ + + + + +