Foundation HTML5 with CSS3

Chapter 8

A menu element is flow content and requires both a start and end tag. It can contain any other flow content,

including nested menus, 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>