W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

menuitem intro menuitem browser display menuitem parents menuitem syntax

HTML5 menuitem element

The menuitem element allows you to add a command to a popup menu. »video

About menuitem

Display & support menuitem

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children menuitem

Attributes menuitem

Syntax menuitem

1<menuitem> »video

Attributes and Values menuitem (comma separated)

<menuitemattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.checked="",  , checked-<menuitem checked>
2.command=text-<menuitem command="the_id_of_another_element">
3.default="",  , default-<menuitem default>
4.disabled="",  , disabled-<menuitem disabled>
5.icon=URL-<menuitem icon="plus.jpg">
6.label=text-<menuitem label="add border">
7.radiogroup=text-<menuitem radiogroup="name_of_a_group_of_commands" type="radio">
-<menuitem type="radio">
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<menuitem accesskey="h">
2.class=class name»html »img<menuitem class="class_name">
3.contenteditable="",  , true, false »html<menuitem contenteditable="true">
4.contextmenu=menu id value»html<menuitem contextmenu="menu_id_value">
5.data-*= value -<menuitem data-http-error="404">
6.dir=ltr, rtl, auto»html<menuitem dir="ltr">
7.draggable= true,  , false»img<menuitem draggable="false">
8.dropzone= copy, move, link, string:, file: -<menuitem dropzone="copy">
9.hidden= "",  , hidden»html »img<menuitem hidden="hidden">
10.id=id name»html »img<menuitem 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<menuitem lang="en">
17.spellcheck="",  , true, false»html<menuitem spellcheck="true">
18.style=CSS property:value»html »img<menuitem style="color:red">
19.tabindex= integer »img<menuitem tabindex="3">
20.title=text»html »link»style »abbr»dfn
»img »meter
<menuitem title="html page">
21.translate="", yes, no»html »img<menuitem 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 menuitem element

HTML5 menuitem, adding a command to a context menu

min video details
00:00 video tutorial: menu and menuitem elements
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 menuitem element, please see the specs: W3CWHATWG