This example demonstrates how to create a Menu instance using nothing but JavaScript.
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.
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.
1 | /* |
2 | Instantiate a Menu: The first argument passed to the constructor |
3 | is the id for the Menu element to be created, the second is an |
4 | object literal of configuration properties. |
5 | */ |
6 | |
7 | var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true }); |
8 | |
9 | |
10 | /* |
11 | Add items to the Menu instance by passing an array of object literals |
12 | (each of which represents a set of YAHOO.widget.MenuItem |
13 | configuration properties) to the "addItems" method. |
14 | */ |
15 | |
16 | oMenu.addItems([ |
17 | |
18 | { text: "Yahoo! Mail", url: "http://mail.yahoo.com" }, |
19 | { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" }, |
20 | { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }, |
21 | { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" } |
22 | |
23 | ]); |
24 | |
25 | |
26 | /* |
27 | Since this Menu instance is built completely from script, call the |
28 | "render" method passing in the DOM element that it should be |
29 | appended to. |
30 | */ |
31 | |
32 | oMenu.render("rendertarget"); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings