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.
command
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')">
</menu>
