HTML/Elements/menu

From Web Education Community Group
< HTML‎ | Elements
Revision as of 19:13, 22 November 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<menu>

The <menu> element represents a list of commands.

HTML Attributes

  • type = context/ toolbar/ list
    Indicates the kind of menu being declared:
    • context
      the commands of a context menu, and the user can only interact with the commands if that context menu is activated. [Example B]
    • toolbar
      A list of active commands that the user can immediately interact with. [Example A]
    • list
      an unordered list of items (each represented by an li element), each of which represents a command that the user can perform or activate, or, if the element has no li element children, flow content describing available commands.


  • label = string
    Gives the label of the menu.


See also global attributes.


Examples

Example A

For example, the following represents a toolbar with three menu buttons on it, each of which has a dropdown menu with a series of options [try it]:

<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="fnew()">New...</button>
      <button type="button" onclick="fopen()">Open...</button>
      <button type="button" onclick="fsave()">Save</button>
      <button type="button" onclick="fsaveas()">Save as...</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="ecopy()">Copy</button>
      <button type="button" onclick="ecut()">Cut</button>
      <button type="button" onclick="epaste()">Paste</button>
    </menu>
  </li>
  <li>
    <menu label="Help">
      <li><a href="help.html">Help</a></li>
      <li><a href="about.html">About</a></li>
    </menu>
  </li>
</menu>

Menu01.png


Example B

Here is an example of a context menu for an input control [try it]:

<form name="npc">
  <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
   <menu type=context id=namemenu>
     <command label="Pick random name"
        onclick="document.forms.npc.elements.char.value = getRandomName()">
     <command label="Prefill other fields based on name"
        onclick="prefillFields(document.forms.npc.elements.char.value)">
   </menu>
</form>


HTML Reference

The HTML5 specification defines the <menu> element in 4.12.4 The menu element.