YUI Library Examples: Menu Family: Basic Menu From Markup

Creating a Menu from existing markup

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.


1	<div id="basicmenu" class="yuimenu">
2	<div class="bd">
3	<ul class="first-of-type">
4	<li class="yuimenuitem">
5	<a class="yuimenuitemlabel" href="http://mail.yahoo.com">
6	Yahoo! Mail
7	</a>
8	</li>
9	<li class="yuimenuitem">
10	<a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">
11	Yahoo! Address Book
12	</a>
13	</li>
14	<li class="yuimenuitem">
15	<a class="yuimenuitemlabel" href="http://calendar.yahoo.com">
16	Yahoo! Calendar
17	</a>
18	</li>
19	<li class="yuimenuitem">
20	<a class="yuimenuitemlabel" href="http://notepad.yahoo.com">
21	Yahoo! Notepad
22	</a>
23	</li>
24	</ul>
25	</div>
26	</div>
	view plain \| print \| ?

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.


1	/*
2	Instantiate a Menu: The first argument passed to the
3	constructor is the id of the element in the page
4	representing the Menu; the second is an object literal
5	of configuration properties.
6	*/
7
8	var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
9
10
11	/*
12	Call the "render" method with no arguments since the
13	markup for this Menu instance is already exists in the page.
14	*/
15
16	oMenu.render();
	view plain \| print \| ?

YUI Library Examples: Menu Family: Basic Menu From Markup

Creating a Menu from existing markup

Menu Family Examples:

More Menu Family Resources: