Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Menu Family: Basic Menu From JavaScript

# Menu Family: Basic Menu From JavaScript

This example demonstrates how to create a basic menu using nothing but JavaScript.

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.

## Creating a Menu from JavaScript

To create a Menu with no pre-existing markup on the page, call the Menu constructor (`YAHOO.widget.Menu`) passing the id of the Menu element to be created as the first argument.

Add items to a Menu instance via the `addItem`, `insertItem`, or `addItems` methods.

Finally, it is necessary to call the `render` method passing the id of, or reference to the element the Menu should be appended to.

/* Instantiate the menu. The first argument passed to the constructor is the id of the DOM element to be created for the menu; the second is an object literal representing a set of configuration properties for the menu. */ var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true }); /* Add items to the menu by passing an array of object literals (each of which represents a set of YAHOO.widget.MenuItem configuration properties) to the "addItems" method. */ oMenu.addItems([ { text: "Yahoo! Mail", url: "http://mail.yahoo.com" }, { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" }, { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }, { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" } ]); /* Since this menu is built completely from script, call the "render" method passing in the id of the DOM element that the menu's root element should be appended to. */ oMenu.render("rendertarget");

### 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