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:
+
+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:
+
+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.
+
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.
+
<div id="productsandservices">) is ready to be scripted.
+