Context menu Attribute in HTML5

In this article I am going to describe about the implementation and use of contextmenu attribute in HTML5
  • 1220

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

cont.jpg

© 2013 dotNetheaven. All rights reserved.