Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Menu Family: Multi-tiered Menu From Markup

# Menu Family: Multi-tiered Menu From Markup

This example demonstrates how to create a multi-tiered menu using existing markup on the page.

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.

- Communication
  - 360°
  - Alerts
  - Avatars
  - Groups
  - Internet Access
  - PIM
    - Yahoo! Mail
    - Yahoo! Address Book
    - Yahoo! Calendar
    - Yahoo! Notepad
  - Member Directory
  - Messenger
  - Mobile
  - Photos
- Shopping
  - Auctions
  - Autos
  - Classifieds
  - Flowers & Gifts
  - Points
  - Real Estate
  - Travel
  - Wallet
  - Yellow Pages
- Entertainment
  - Fantasy Sports
  - Games
  - Kids
  - Music
  - Movies
  - Radio
  - Travel
  - TV
- Information
  - Downloads
  - Finance
  - Health
  - Local
  - Maps & Directions
  - My Yahoo!
  - News
  - Search
  - Small Business
  - Weather

## Creating a Menu with submenus 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.

In addition to a label, each item in a Menu can also have a submenu. A submenu can be added to a Menu item by nesting a Menu element inside its root (`<li class="yuimenuitem"/>`) element.

<div id="productsandservices" class="yuimenu"> <div class="bd"> <ul class="first-of-type"> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://communication.yahoo.com"> Communication </a> <!-- A submenu --> <div id="communication" class="yuimenu"> <div class="bd"> <ul> <!-- Items for the submenu go here --> </ul> </div> </div> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://shopping.yahoo.com"> Shopping </a> <!-- A submenu --> <div id="shopping" class="yuimenu"> <div class="bd"> <ul> <!-- Items for the submenu go here --> </ul> </div> </div> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="http://entertainment.yahoo.com"> Entertainment </a> <!-- A submenu --> <div id="entertainment" class="yuimenu"> <div class="bd"> <ul> <!-- Items for the submenu go here --> </ul> </div> </div> </li> <li class="yuimenuitem"> <a class="yuimenuitemlabel" href="#information"> Information </a> <!-- A submenu --> <div id="information" class="yuimenu"> <div class="bd"> <ul> <!-- Items for the submenu go here --> </ul> </div> </div> </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 and corresponding submenus. 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("productsandservices", { 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