HTML and CSS Reference
In-Depth Information
A menu element is flow content and requires both a start and end tag. It can contain any other flow content,
including nested menu s, or if the menu is a list, its commands can each be contained in an li element
(covered in Chapter 4). The commands in a menu element can take the form of command elements (which
we'll cover next), but they can also be links, buttons, or other form controls.
Although there are some surface similarities, don't confuse the menu element with the nav element (also
covered in Chapter 4). A nav element contains navigational links to other pages on the Web or sections of
the same page, whereas a menu element contains executable commands, not navigation links (even if
those commands are represented by a elements).
Required Attributes
There aren't any required attributes for the menu element.
Optional Attributes
type : indicates the type of menu being declared, either list , context , or toolbar . If this
attribute is missing or empty, list is the default menu type.
label : a text label for the menu that browsers will display in a contextual menu or toolbar.
The command element represents an executable command in a menu element, or it can appear anywhere
else in a document to represent a keyboard shortcut. It's a void element that can contain no text and must
not have an end tag, but you can self-close it with a trailing slash if you're a stickler for XHTML syntax. A
label attribute provides the text label that will be visible to the user, and an optional icon attribute can
include a graphic icon for the command (the attribute's value is the icon image's URL).
There are three types of commands, indicated by the optional type attribute: command (the default if type
is missing or empty), radio (similar to a radio button in that it represents an option in a set where only one
choice is allowed), or checkbox (represents a toggle or an option in a set that allows multiple selections,
much like a form checkbox).
Listing 8-28 shows a menu element containing a set of commands. This is a contextual menu, as indicated
by the menu element's type attribute, so it would appear when a user right-clicks on the page or on a
target element that carries the menu's ID in its contextmenu attribute, first mentioned way back in Chapter
2 (Go on, flip back to it. We'll wait.). Each command is a mutually exclusive radio option, all belonging to
the same “colors” set. Selecting one of the commands triggers the chColor JavaScript function (which we
just made up for this example).
Listing 8-28. A contextual menu using the menu and command elements
<menu type="context" id="color" label="Change color">
<command type="radio" radiogroup="colors" label="Black" onclick="chColor('black')">
<command type="radio" radiogroup="colors" label="Red" onclick="chColor('red')">
<command type="radio" radiogroup="colors" label="Blue" onclick="chColor('blue')">
Search WWH ::

Custom Search