Menu
Is it possible to add item to the default browser right button click menu?
507
A right-click menu or context menu in a browser is a menu with multiple choices that appears on right-click mouse operation. It provides multiple functionalities relevant to that particular context. Sometimes, we want the context menu to have more options or features but we cannot modify the default context menu.
To make this HTML menu visible when right-clicking in the browser, we need to listen for contextmenu events. We can bind the event listener directly on the document or we can limit the area that a user can right-click to see the custom context menu. In our example, the area for right-click is the entire body element.
One option is to replace the context menu with your own JavaScript triggered equivalent.
Firefox implemented the menu element where you can add to the existing context menu. It was also implemented in Chrome behind a flag. Unfortunately this feature has been removed from the W3C standard due to a lack of implementation interest.
<menu type="context" id="mymenu"> <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem> <menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem> <menu label="Share on..." icon="/images/share_icon.gif"> <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem> <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> </menu> To make an element use this context menu, add the contextmenu="mymenu" attribute to it. You can see here that mymenu matches the id attribute of the menu element.
Source
Demo
160
On modern browsers you can manipulate the built-in context menu like so:
<menu type="context" id="supermenu"> <menuitem label="trial" onclick="alert('Smile please')"></menuitem> <menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem> <menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem> <menu label="share"> <menuitem label="twitter" onclick="alert('foo')"></menuitem> <menuitem label="facebook" onclick="alert('bar')"></menuitem> </menu> </menu> <a href='#' contextmenu="supermenu">Right click me</a> For further reading: http://www.w3.org/wiki/HTML/Elements/menu
demo: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
