menu ... ⁄menu
HTML5 menu element
The menu element allows you to create a toolbar menu or a popup menu containing commands. »video
About menu
- is an optional element
- multiple menu elements allowed per HTML5 document
Display & support menu
- display in browser »details
- display type: block
Parents, children menu
- menu nested within elements
- elements nested within menu
Attributes menu
- required: none
- optional: global attributes, event attributes
Syntax menu
| 1 | <> ... </> »video |
Attributes and Values menu (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| 1. | label | = | string | - | < label="menu_label"> ... <⁄> | |
| 2. | type | = | popup, toolbar | »details | < type="popup"> ... <⁄> < type="toolbar"> ... <⁄> | |
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 11. | itemid | = | URL | - | - | |
| 12. | itemprop | = | string | »link »a | - | |
| 13. | itemref | = | string | - | - | |
| 14. | itemscope | = | "", , itemscope | - | - | |
| 15. | itemtype | = | absolute URL | - | - | |
| 16. | lang | = | language code | »html »head»title »img | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| All Global Attributes | ||||||
| 3. global event attributes | ||||||
| 1. | onclick | = | script | » list | <element onclick="script" > ... | |
| 2. | ondblclick | = | script | » list | <element ondblclick="script" > ... | |
| All Event Attributes | ||||||
Video demonstration menu element
HTML5 menu: a context menu with one command, Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: menu element |
| 00:09 | menu element allows you to create a toolbar menu or a popup menu containing commands |
| 00:15 | this is an example of context menu containing 1 command |
| 00:18 | this is the command called "add border" |
| 00:23 | in browser: the command called "add border" when clicked adds a green border to the blue rectangle in page |
| 00:27 | the blue rectangle is the div having the id="zz" |
| 00:31 | this menu is a context menu (a popup menu) currently the value "popup" of the type attribute is not supported in browser while the deprecated value "context" still is, that is why our demo is based on "context" value instead of "popup" |
| 00:52 | the context menu in our case is activated through the global attribute "contexmenu" whose value (idmenu) is the value of the id attribute from menu element |
| 01:02 | contexmenu attribute applied on html root element is inherited by all elements in page → wherever we click on page, the command displays inside the menu |
| 01:12 | this area may be restricted to 1 element only: moving the contexmenu attribute from html element to div element → the command displays only when we right click above the div element (= the blue rectangle in page) |
| 01:27 | the menuitem element allows us to add a command inside our context menu where: |
| 01:32 | the label attribute gives the label of the command |
| 01:41 | the icon attribute holds the icon of the command |
| 01:48 | and the onclick mouse event holds a javascript function (= the command itself) |
For more information about the element, please see the specs: W3C ⁄ WHATWG