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++

menu ... ⁄menu

Share it

menu intro menu browser display menu syntax menu type attribute

HTML5 menu element

The menu element allows you to create a toolbar menu or a popup menu containing commands. »video

About menu

Display & support menu

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children menu

Attributes menu

Syntax menu

1<menu> ... </menu> »video

Attributes and Values menu (comma separated)

<menuattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.label=string-<menu label="menu_label"> ... <⁄menu>
»details<menu type="popup"> ... <⁄menu>
<menu type="toolbar"> ... <⁄menu>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<menu accesskey="h"> ... </menu>
2.class=class name»html »img<menu class="class_name"> ... </menu>
3.contenteditable="",  , true, false »html<menu contenteditable="true"> ... </menu>
4.contextmenu=menu id value»html<menu contextmenu="menu_id_value"> ... </menu>
5.data-*= value -<menu data-http-error="404"> ... </menu>
6.dir=ltr, rtl, auto»html<menu dir="ltr"> ... </menu>
7.draggable= true,  , false»img<menu draggable="false"> ... </menu>
8.dropzone= copy, move, link, string:, file: -<menu dropzone="copy"> ... </menu>
9.hidden= "",  , hidden»html »img<menu hidden="hidden"> ... </menu>
10.id=id name»html »img<menu id="unique_id_name"> ... </menu>
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<menu lang="en"> ... </menu>
17.spellcheck="",  , true, false»html<menu spellcheck="true"> ... </menu>
18.style=CSS property:value»html »img<menu style="color:red"> ... </menu>
19.tabindex= integer »img<menu tabindex="3"> ... </menu>
20.title=text»html »link»style »abbr»dfn
»img »meter
<menu title="html page"> ... </menu>
21.translate="", yes, no»html »img<menu translate="yes"> ... </menu>
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 menu element, please see the specs: W3CWHATWG