The HTML 5 Menu tag, for a simpler future

Near the select tag, menu is added in HTML 5 to create a context menu or a toolbar, depending on the type assigned to the tag.

In fact the content is more varied than select and rendering capabilities are more developed.

The tag is currently rarely implemented. Checking in your browser, there must be below a horizontal menu:

  • File
  • Edit
  • Help
  • It is actually possible to get the desired result with a stylesheet (see links below), which probably explains the delay to implement this tag.

    Here is an image of toolbar made with the menu tag, and buttons or CSS 3, given by the W3C:

    Syntax

    A menu may contain options, a list of buttons, other menus, command tags, input, separators <hr>.

    This element must have an opening tag and a closing tag contrary to inner elements.

    <menu type="" label="">
    </menu>
    <menu type="" label="">
      <option>
      <option>
    </menu>
    <menu type="" label="">
      <li>
      <li>
    </menu>

    A button can represent a sub-menu, in this case the syntax may look like this:

    <menu type="toolbar">
    <li>
    <menu label="File">
    <button type="button" onclick="fopen()">Open</button>
    ... boutons....
    </menu>
    </li>
    <li>
    <menu label="Edit">
    <button type="button" onclick="fcopy()">Copy</button>
    ...
    </menu>
    </li>
    </menu>

    Rendering is the image above. An inner menu inside a toolbar menu is rendered as a button.

    Attributes of menu

    Attribute Value Purpose Version
    type "context"
    List of commands that appears in a context.
    HTML 5
    type "toolbar"
    Toolbar of icons representing sub-menus or commands.
    HTML 5
    type "list" (default)
    List of commands.
     
    label string
    To identify the menu or the submenu.
    HTML 5
    ID string
    Identifier used to associate a menu to an element.
     

    Relative attribute

    This attribute associates a menu to another element in the page with the ID of the menu tag. So it is a general attribute for any HTML tag.

    Attribute Value Purpose Version
    contextmenu ID of a menu
    Associate a context menu to an item.
    HTML 5

    When the mouse is over an item, or a keyboard key is pressed on this element, an event "show" is activated, the contextual menu whose id is assigned to contextmenu should automatically appear.

    Attributes of inner elements (commands)

    Regardless of their type, list item, option, button, menu items are commands and have a set of useful attributes. They are called facets.

    Attribute Value Purpose Version
    type commande
    Defines the type of the element. Ex: radio.
     
    id string
    Identifier.
     
    label string
    Text displayed and visible to the user.
    HTML 5
    hint string
    A hint to describe the function.
    HTML 5
    icon URL
    Address of an image.
    HTML 5
    disabled disabled/none
    Active state or not.
     
    checked checked/none
    Element checked or not.
     
    hidden true/false
    Element hidden or not.
     
    action URL/script/<a>
    Action associated with the item.
     

    Action can be an attribute of submission form action="", or JavaScript event. If the element is a single URL in a <a> tag , the action is inside the href attribute.

    JavaScript

    You can access these attributes with those JavaScript varibles, if the menu item in the DOM is given the name element:

    See also

    © 2010-2012 Xul.fr