Yahoo! Developer Network Home - Help

YUI Library Examples: Menu Family: Basic Menu From Markup

Menu Family: Basic Menu From Markup

This example demonstrates how to create a Menu instance using existing markup on the page.

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

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                <class="yuimenuitemlabel" href="http://mail.yahoo.com"
6                    Yahoo! Mail 
7                </a> 
8            </li> 
9            <li class="yuimenuitem"
10                <class="yuimenuitemlabel" href="http://addressbook.yahoo.com"
11                    Yahoo! Address Book 
12                </a> 
13            </li> 
14            <li class="yuimenuitem"
15                <class="yuimenuitemlabel" href="http://calendar.yahoo.com"
16                    Yahoo! Calendar 
17                </a> 
18            </li> 
19            <li class="yuimenuitem"
20                <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 
8var 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 
16oMenu.render(); 
view plain | print | ?

Menu Family Examples:

More Menu Family Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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