Context menu Attribute in HTML5
In this article I am going to describe about the implementation and use of contextmenu attribute in HTML5
Contextmenu Attribute
Basically, it allows you to add different
options to a browsers 'right-click menu' with just a few lines of HTML and will
even work with Javascript disabled. Although, and very sadly, it currently
doesnot support any of the major browsers.
The contextmenu attribute specifies a context
menu for an element. The context menu appears when a user right-clicks on the
element. Contentmenu Attribute is new in HTML5.
The value of the contextmenu attribute is the
id of the <menu> element to open.
Menu items may have
label,
icon, and
onclick
attributes to represent design and actions.
Using
contextmenu is a lot
simpler than you may think. All you need is to add the
contextmenu
attribute like so:
<section
contextmenu="my-right-click-menu">
<!--
Add anything you want here
-->
</section>
As you can see you can add it just like you
would add any id
or class.
Next we create the menu:
<menu
type="context"
id="my-right-click-menu">
<!--
Here we will add the new 'right-click' menu items
-->
</menu>
Browser Support
Currently it is Not supported by any of the
major browsers.
Syntax
<element contentmenu="menu-id">
Attribute Value
|
Value |
Description |
| menu_id |
The id of the <menu>
element to be open |
Example of Context menu attribute in HTML5
<!DOCTYPE
html>
<html
lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
charset="utf-8"
/>
<title>Context
menu Attribute in HTML5</title>
</head>
<body>
<p
contextmenu="menu">This
paragraph has a context menu called "menu". The context menu should appear when
a user right-clicks on this paragraph.</p>
<menu
id="menu">
<command
label="New">
<command
label="Open">
<command
label="Save">
<command
label="Copy">
<command
label="Paste">
<command
label="Write
Tutorial"
onclick="doSomething()">
<command
label="Edit
Tutorial"
onclick="doSomethingElse()">
</menu>
</menu>
<p>Contextmenu
is not currentlly supported in any browser</p>
</body>
</html>
Output
