HTML contextmenu Attribute
source link: https://www.geeksforgeeks.org/html-contextmenu-attribute/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
HTML contextmenu Attribute
HTML contextmenu attribute is a global attribute that will be used to define a context-menu bar for an element. The value of the contextmenu attribute must be the same as the id of the <menu> element.
So basically, A context menu seems upon user relations, such as when a user right-clicks on the element. As know HTML5 allows us to customize this menu. Here are some implementation examples, including nested menus.
Note: HTML contextmenu Attribute is not supported in HTML5.
Syntax:
<element contextmenu="menu_id">
Attribute Values: It contains the value menu_idwhich represents the id of the <menu> element to be opened.
Examples of HTML contextmenu Attribute
Example: HTML code below illustrates the use of contextmenu attribute.
<!DOCTYPE html><html><head><title>HTML contextmenu attribute </title><style>h1 {color: green;}</style></head><body><center><h1>GeeksforGeeks</h1><h2>HTML contextmenu attribute</h2><div style="background:green;border:2px solid#black;padding: 10px;" contextmenu="geeks"><p>A Computer Science Portal for Geeks</p><menu type="context" id="geeks"><menu label="Share on..."><menuitem label="Twitter"onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem><menuitem label="Pinterest"onclick="window.open('http://pinterest.com/pin/create/button/?url=' + window.location.href);"></menuitem></menu><menuitem label="Email This Page"onclick="window.location='mailto:?body='+window.location.href;"></menuitem></menu></div><p>A Computer Science Portal for Geeks</p><hr><p>Right click on green div and see the menuitem</center></body></html> |
Output:
HTML contextmenu Attribute
Supported Browsers:
HTML contextmenu Attribute no longer supports any browsers.
“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank
With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.
So get ready for salary hike only with our Full Stack Development Course.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK