Menu

The Menu widget models a context menu, otherwise known as a right-click or popup menu, and they also appear in ComboButton and DropDownButton widgets.

MenuItem widgets are the actual items in the menu. The PopupMenuItem is like a MenuItem, but displays a submenu or other widget to the right . A PopupMenuItem always has two child nodes: a tag with the displayed label (usually in a SPAN tag), and a widget to be popped up, typically a dijit.Menu widget.

Example

Right click anywhere in Grey Area

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Menu Demo</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

       dojo.require("dojo.parser");

       dojo.require("dijit.Menu");

     </script>

</head>

<body class="tundra">

        <style>

        .myIcon {

           /*  Note: Drupal may add an anchor tag here.  Don't include it in your code */

           background-image: 

              url(http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/checkmark.gif); 

           background-position: -16px 0px;

           width: 16px;

           height: 16px;

        }

        </style>

        <div dojoType="dijit.Menu" id="submenu1" 

                 contextMenuForWindow="true" style="display: none;">

                <div dojoType="dijit.MenuItem" iconClass="myIcon" 

                     onClick="alert('Hello world');">Enabled Item</div>

                <div dojoType="dijit.PopupMenuItem" id="submenu2">

                    <span>Submenu</span>

                    <div dojoType="dijit.Menu">

                                <div dojoType="dijit.MenuItem" 

                                     onClick="alert('Submenu 1!')">Submenu Item One</div>

                                <div dojoType="dijit.MenuItem" 

                                     onClick="alert('Submenu 2!')">Submenu Item Two</div>

                    </div>

                </div>

        </div>

</body></html>

dijit.Menu Define a drop down or context (right-click) menu.
Attributes
contextMenuForWindow	Boolean false	if true, right clicking anywhere on the window will cause this context menu to open; if false, must specify targetNodeIds
popupDelay	Integer 500	number of milliseconds before hovering (without clicking) causes the popup to automatically open
targetNodeIds	String[]	Array of dom node ids of nodes to attach to. Fill this with nodeIds upon widget creation and it becomes context menu for those nodes.
Methods
Methods
addChild(/Widget/ child, /Integer?/ insertIndex)	Process the given child widget, inserting its dom node as a child of our dom node
bindDomNode(/String\|DomNode/ node)	attach menu to given node
Widget[] getChildren()	returns array of children widgets
removeChild(/Widget/ page)	removes the passed widget instance from this widget but does not destroy it
unBindDomNode(/String\|DomNode/ nodeName)	detach menu from given node
Extension Points
onClose()	callback when this menu is closed
onOpen(/Event/ e)	Open menu relative to the mouse

dijit.MenuItem One menu item, usable in a Menu
Attributes
disabled	Boolean false	if true, the menu item is disabled if false, the menu item is enabled. Use setDisabled() to change after creation time.
iconClass	String	class to apply to div in button to make it display an icon
label	String	Menu text. Typically specified as innerHTML when declaring a Menu programmatically.
Methods
setDisabled(/Boolean/ value)	enable or disable this menu item
Extension Points
getParent()	returns the parent widget of this widget, assuming the parent implements dijit._Container
onClick()	User defined function to handle clicks

dijit.MenuSeparator

A line between two menu items

Accessibility

Keyboard

Action	Key
Open a context menu	On Windows: shift-f10 or the Windows context menu key On Firefox on the Macintosh: ctrl-space
Navigate menu items	Up and down arrow keys
Activate a menu item	Spacebar or enter
Open a submenu	Spacebar, enter, or right arrow
Close a context menu or submenu	Esc or left arrow
Close a context menu and all open submenus	Tab

Known Issues

When reading a menu item on Firefox 2, JAWS 8 may say "submenu" for an item that does not have a submenu. This will be fixed in Firefox 3.

Left click to open

Submitted by XNeo on Tue, 06/24/2008 - 16:35.

Note that as of dojo 1.1.0 dijit.Menu has another attribute called "leftClicktoOpen". If set to "true" this parameter will make the menu open on the left mouse button click instead.

targetNodeIds expects an array

Submitted by ronr on Thu, 11/06/2008 - 13:56.

The documentation says targetNodeids expects an array. However, it is unclear how to add an array in a dom attribute (in your html). I figured it out by trial and error, to avoid others from having to do the same: an array in your dom attribute is just a comma seperated string with no quoting, like:

targetNodeIds='foo,bar,foobar' or targetNodeIds="foo,bar,foobar"

Search

The Book of Dojo