Yahoo! Developer Network Home - Help

YDN Site Search

# 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 will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.

View example in new window.

- Yahoo! Mail
- Yahoo! Address Book
- Yahoo! Calendar
- Yahoo! Notepad

- Yahoo! Local
- Yahoo! Maps
- Yahoo! Travel
- Yahoo! Shopping

- Yahoo! Messenger
- Yahoo! 360
- Yahoo! Groups
- Yahoo! Photos

## 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 Menu can house many `<ul/>` elements to organize related items into groups.

<div id="menuwithgroups" class="yuimenu"> <div class="bd"> <ul class="first-of-type"> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://mail.yahoo.com"> Yahoo! Mail </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://addressbook.yahoo.com"> Yahoo! Address Book </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://calendar.yahoo.com"> Yahoo! Calendar </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://notepad.yahoo.com"> Yahoo! Notepad </a> </li> </ul> <ul> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://local.yahoo.com"> Yahoo! Local </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://maps.yahoo.com"> Yahoo! Maps </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://travel.yahoo.com"> Yahoo! Travel </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://shopping.yahoo.com"> Yahoo! Shopping </a> </li> </ul> <ul> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://messenger.yahoo.com"> Yahoo! Messenger </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://360.yahoo.com"> Yahoo! 360 </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://groups.yahoo.com"> Yahoo! Groups </a> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://photos.yahoo.com"> Yahoo! Photos </a> </li> </ul> </div> </div>

To instantiate a Menu, pass the id of its corresponding HTML element (in this case "basicmenu") to the Menu constructor (`YAHOO.widget.Menu`). Once instantiated, it is necessary to call the `render` method. If you are creating a Menu from markup that exists in the page you call `render` with no arguments.

/* Instantiate the menu. The first argument passed to the constructor is the id of the element in the DOM that represents the menu; the second is an object literal representing a set of configuration properties for the menu. */ var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true }); /* Call the "render" method with no arguments since the markup for this menu already exists in the DOM. */ oMenu.render();

### Menu Family Examples:

- Basic Menu From Markup
- Basic Menu From JavaScript
- Grouped Menu Items Using Markup
- Grouped Menu Items Using JavaScript
- Grouped Menu Items With Titles From Markup
- Grouped Menu Items With Titles From JavaScript
- Multi-tiered Menu From Markup
- Multi-tiered Menu From JavaScript
- Handling Menu Click Events
- Listening For Menu Events
- MenuItem Configuration Properties
- Setting Menu Configuration Properties At Runtime
- Website Left Nav With Submenus Built From Markup
- Website Left Nav With Submenus From JavaScript
- Website Top Nav With Submenus Built From Markup
- Website Top Nav With Submenus From JavaScript
- Website Left Nav Using Animation With Submenus Built From Markup
- Website Left Nav Using Animation With Submenus From JavaScript
- Website Top Nav Using Animation With Submenus Built From Markup
- Website Top Nav Using Animation With Submenus From JavaScript
- Context Menu
- Adding A Context Menu To A Table
- Adding A Context Menu To A TreeView
- OS-Style Programs Menu
- Application Menubar
- Context Menu Integration (included with examples for DataTable Control (beta))
- Menu Buttons (included with examples for Button Control (beta))
- Split Buttons (included with examples for Button Control (beta))

### More Menu Family Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

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