Menu

The first element of an application is the bar of menu. Under XUL, that is designed with the menubar tag in which one places menu tags corresponding to each vertical menu. And in the menus one finds the lines of the menuitems.

Tags describing a menu

toolbox

One usually places a menubar in a container of toolbox type.

menubar

It is the horizontal bar in which one places the menus. Note that one can place menu in other graphical components.

menupopup

It is the component that make a menu dynamic. One can place it in any XUL component.

menu

List element in which one can choose.

menutitem

It is an element of a menu list. It behaves like a button and the main attributes are identical.

menuseparator

To place a line between two elements of menus and to create groups of items, the tag menuseparator is used.

Example of menu

<toolbox flex="1">
    <menubar>
        <menu label="Files">
            <menupopup>
                <menuitem label="Open" />
                <menuitem label="Close" />
                <menuseparator />
                <menuitem label="Quit" />
            </menupopup>
        </menu>
        <menu label="Help" >
            <menupopup>
                <menuitem label="Manual" />
            </menupopup>
        </menu>
    </menubar>
</toolbox>

Attributes to use a menu

The menu tag and menuitem tags have same attributes as the button object:

id

The identifier to reach the object via the DOM.

Label

The displayed text.

Disabled

This attribute has a true or false values. In the first case it is disabled and appears grayed. One modifies the state by accessing the object by its id.

accesskey

A key or combination of keys which opens the menu or execute the command of the menuitem and which is as a mouse click on the object.
Example where the "o" key is assigned to the Open menuitem:

<menuitem label="Open" accesskey="o" />      

The menupopup tag is a layout component which does not have useful attributes.

Add commands to menus

As one saw previously one can add a command to a graphic component with the onCommand attribute, but to compose a menu, it will be better to place the list of commands in the JavaScript code. And that is done with the DOM and the addEventListener method.

One defines a function for the open command:

function openFun(event)
{
    alert("Open command...");
}

And one associates the event to the corresponding line of menu with a DOM method which find the object by its id, "openMenu" and a method of event:

var x = document.getElementById("openMenu");
x.addEventListener('command', openFun, true);

Note that the name of the function, openFun, is the second parameter.
One can simplify by chaining the method calls:

document.getElementById("openMenu").addEventListener('command', openFun, true);

Note that the JavaScript code must be placed after the XUL definition of the menu.

• Demo code.zip.