In this section, we'll see how to create a menu bar with menus on it.
Creating a Menu
XUL has a number of different ways of creating menus. The most basic way is to add a menu bar with a row of menus on it like many applications have. You can also create popup menus. The menu features of XUL consist of a number of different elements which allow you to create menu bars or popup menus. The items on the menus can be customized quite easily. We've already seen part of how to make menus using the
. This section will build on that.
Menu bars are usually created much like a
toolbar. The menu bar can optionally be placed inside a
and the menu would work just like any other toolbar. XUL does have some special elements which provide special functionality typical of menus.
There are five elements associated with creating a menu bar and its menus, which are explained briefly here and in detail afterwards:
- The container for the row of menus.
- Despite the name, this is actually only the title of the menu on the menubar. This element can be placed on a menubar or can be placed separately.
- The popup box that appears when you click on the menu title. This box contains the list of menu commands.
- A separator bar on a menu. This would be placed in a
You can customize the menus on the menubar to have whatever you want on them on all platforms except the Macintosh. This is because the Macintosh has its own special menu along the top of the screen controlled by the system. Although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. You should keep this is mind when creating menus.
Example of a simple menu bar
<toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="File"> <menupopup id="file-popup"> <menuitem label="New"/> <menuitem label="Open"/> <menuitem label="Save"/> <menuseparator/> <menuitem label="Exit"/> </menupopup> </menu> <menu id="edit-menu" label="Edit"> <menupopup id="edit-popup"> <menuitem label="Undo"/> <menuitem label="Redo"/> </menupopup> </menu> </menubar> </toolbox>
Here, a simple menu bar is created using the
element. It will create a row for menus to be placed on. Two menus, File and Edit have been created here. The
element creates the title at the top of the menu, which appears on the menu bar. The popups are created using the
element. It will pop up when the user clicks on the parent menu title. The size of the popup will be large enough to fit the commands inside it. The commands themselves are created using the
element. Each one represents a single command on the menu popup.
You can also create separators on the menus using the
element. This is used to separate groups of menuitems.
is a box containing menus. Note that it has been placed inside a flexible
. The menubar has no special attributes but it is a type of box. This means that you could create a vertical menubar by setting the
attribute to vertical.
- The unique identifier of the menu title button.
- The text to appear on the menu, such as File or Edit.
- This boolean attribute determines whether the menu is disabled. Although you can, there's rarely a need to disable an entire menu. This attribute can be set to either
false. Of course, the latter is the default.
- This is the key that the user can press to activate the menu item. This letter is typically shown underlined on the menu title. Mozilla will look at the label attribute and add an underline character to the character specified here. For that reason, you should specify a character that exists in the text (although the key will still work if it doesn't).
menu element is normally placed on a menubar, although it does not have to be. However, it will be given a different look. The image here shows what the earlier example would look like without the menu bar.
element creates the popup window containing the menu commands. It is a type of box which defaults to a vertical orientation. You could change it to horizontal if you wanted to and the
would be placed in a row. Normally only
would be placed on a
. You can place any element on a
menupopup, however they will be ignored on a Macintosh.
- The unique identifier of the menu item.
- The text to appear on the menu item, such as Open or Save.
- This boolean attribute determines whether the menu item is disabled. This attribute can be set to either
falsewhere the latter is the default.
- This is the key that the user can press to activate the menu item. This letter is typically shown underlined on the menu title. Mozilla will look at the
attribute and add an underline character to the character specified here. For that reason, you should specify a character that exists in the text.
- This specifies the shortcut key text to appear next to the menu command text. It does not associate a key action with the
menuitemhowever. We'll look at how to do this later.
has no special attributes. It just creates a horizontal bar between the menuitems next to it.
Next, we'll learn some more features of menus.