MenuNav Node Plugin: Split Button Top Nav
+ ++This example demonstrates how to create a traditional, two-column page layout +(using Grids) with top navigation rendered like split 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:
+
<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 split button, add the class
+yui-splitbuttonnav to the node representing the root menu's bounding box, as
+illustrated below:
+
<div id="menu-1" class="yui-menu yui-menu-horizontal yui-splitbuttonnav"><!-- Bounding box --> + <div class="yui-menu-content"><!-- Content box --> + <ul> + <!-- Menu items --> + </ul> + </div> +</div>
+Next, define the markup for each menu label. Start with a <span> with a class
+of yui-menu-label applied. Inside the <span>, place two
+<a> elements — one for each of the label's two clickable regions.
+Each <a> has separate, but related responsibilities: The first
+<a> represents the label's default action. The second <a>
+toggles the display of a submenu whose content contains other options related to, or in the same
+category of the default action. Therefore to configure the first <a>,
+simply set its href attribute to any URL. For the second <a>,
+apply a class name of yui-menu-toggle, and set the value of the href
+attribute to the id of the label's corresponding submenu. Lastly, the text node of the second
+<a> should label the contents of its corresponding submenu.
+
<div id="menu-1" class="yui-menu yui-menu-horizontal yui-splitbuttonnav"><!-- Bounding box --> + <div class="yui-menu-content"><!-- Content box --> + <ul> + <li> + + <span class="yui-menu-label"><!-- menu label root node --> + <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action --> + <a href="#answers-options" class="yui-menu-toggle">Answers Options</a><!-- menu label submenu toggle --> + </span> + + <div id="answers-options" class="yui-menu"> + <div class="yui-menu-content"> + <ul> + <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li> + <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li> + <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li> + <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;more=y">Discover</a></li> + </ul> + </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.
+
+Use the
+autoSubmenuDisplay
+and mouseOutHideDelay
+configuration attributes to configure the menu labels to behave like split buttons. Set the
+autoSubmenuDisplay to false, so that each menu label's submenu isn't
+made visible until the menu trigger is clicked. Set the mouseOutHideDelay to
+0 so that a label's submenu is only hidden when the user mouses down on an area
+outside of the submenu.
+
<!-- YUI Seed --> +<script type="text/javascript" src="../../build/yui/yui.js"></script> + +<script type="text/javascript"> +// 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, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 }); + +}); +</script>
<div id="productsandservices">) is ready to be scripted.
+ 