HTML and CSS Reference
In-Depth Information
Without any attributes, the menu list element,
<menu></menu>
, has the
same efect as an unordered list element. It should be used where the content
consists of a list of commands, links, or similar navigation or control elements.
Using menu elements in place of unordered lists allows for better styling con-
trol of page navigational elements.
In HTML5, the menu element has an optional
type
attribute. he default
value is list, which preserves the behavior of existing code. However, if the
type
attribute has a value of
context
, the element can provide a context menu
for a form input ield or other control on the page. In other words, the menu
list is hidden until the user Alt-clicks the associated control. Context menus
are associated with a control through the use of the
contextmenu
attribute,
whose value should be the ID of the menu list element. For example, in the fol-
lowing code snippet
Player Name:
<input type="text" contextmenu="namemenu"/>
<menu type="context" id="namemenu">
<command label="Pick random name" onclick="getRandomName();"/>
<command label="Use your real name" onclick="getRealName();"/>
</menu>
the
menu
element provides a context menu for the input ield deined above
it. he value of the input element's
contextmenu
attribute is the value of the
menu's id attribute. he
command
element, two of which appear inside the
menu
element just shown, is a new HTML5 element that provides a general-
ized means of generating controls that can respond to user actions. In the
preceding code, when the user clicks the
input
element while holding down
the Alt or Ctrl key, the browser can display a submenu of the two commands.
Clicking either context menu item calls a function (not deined in this exam-
ple) to ill in the value of the input ield.
he other permissible value of the menu element's
type
attribute is toolbar.
It is intended to provide web authors and developers with a means of specify-
ing a list of items, possibly icons, that HTML5-level browsers can display as a
horizontal toolbar. However, until browsers add support for the toolbar and
context states of a menu element, web authors should continue to use the CSS
loat
property to create horizontal toolbars and menus. Example 2.17 shows
how the same list can be made to display either vertically or horizontally.
