YUI Library Examples: Menu Family: Grouped Menu Items Using Markup

Menu Family: Grouped Menu Items Using Markup

This example demonstrates how to group MenuItem instances.

Note: By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.

Creating a Menu from existing markup with items organized into groups

The markup for a Menu control follows that of
YAHOO.widget.Module, with its
body element (<div class="bd">) containing a list element
(<ul>).

Each item in a Menu is represented by a list item element
(<li class="yuimenuitem">), each of which has a
label (<a class="yuimenuitemlabel">) that can
contain plain text or HTML.

The body of a Menu instance can house many <ul> elements
to organize related items into groups.

To instantiate a Menu based on existing HTML, pass the id of its corresponding
HTML element (in this case "basicmenu") to the Menu constructor
(YAHOO.widget.Menu) then call the render method with
no arguments.