Some web websites need to disable context menus or customize its options. Its a very easy to customize context menus. Some use native code to create a context menu and some use libraries to make this task easier. In this post we will look at different ways of implementing it and also look at a popular jQuery library.
There are basically two ways to create a context menu.
<html>
<head>
<script>
var menuDisplayed = false;
var menuBox = null;
window.addEventListener("contextmenu", function() {
var left = arguments[0].clientX;
var top = arguments[0].clientY;
menuBox = window.document.querySelector(".menu");
menuBox.style.left = left + "px";
menuBox.style.top = top + "px";
menuBox.style.display = "block";
arguments[0].preventDefault();
menuDisplayed = true;
}, false);
window.addEventListener("click", function() {
if(menuDisplayed == true){
menuBox.style.display = "none";
}
}, true);
</script>
<style>
.menu
{
width: 150px;
box-shadow: 3px 3px 5px #888888;
border-style: solid;
border-width: 1px;
border-color: grey;
border-radius: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
position: fixed;
display: none;
}
.menu-item
{
height: 20px;
}
.menu-item:hover
{
background-color: #6CB5FF;
cursor: pointer;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">Share On Facebook</div>
<div class="menu-item">Share On Twitter</div>
<hr>
<div class="menu-item">Search On Google</div>
<div class="menu-item">Search On Bing</div>
<hr>
<div class="menu-item">Bookmark</div>
</div>
</body>
</html>
Here use attached a event handler for contextmenu event. We retrieve the mouse pointer coordinates during the event and display our menu at that particular location. This works in all browsers. To learn more about contextmenu event click here.
<html>
<head>
<style>
.menu
{
width: 150px;
box-shadow: 3px 3px 5px #888888;
border-style: solid;
border-width: 1px;
border-color: grey;
border-radius: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
position: fixed;
display: none;
}
.menu-item
{
height: 20px;
}
.menu-item:hover
{
background-color: #6CB5FF;
cursor: pointer;
}
body, html
{
height: 100%;
width: 100%;
}
</style>
</head>
<body contextmenu="menu">
</body>
<menu type="context" class="menu" id="menu">
<menuitem class="menu-item" icon="facebook.jpg" label="Share On Facebook"></menuitem>
<menuitem class="menu-item" label="Share On Twitter"></menuitem>
<menu label="Search On">
<menuitem class="menu-item" label="Search On Google"></menuitem>
<menuitem class="menu-item" label="Search On Bing"></menuitem>
</menu>
<menuitem class="menu-item" label="Bookmark"></menuitem>
</menu>
</html>
Here we are using HTMl5 contextmenu attribute feature. The container inside which we want to customize the context menu needs to have a attribute contextmenu assigned to the id of menu tag. And menu tag needs to have type attribute assigned to context. menu tag is also used for other purposes. For more information on it click on these links link1 link2.
At present this is only supported in latest Firefox browsers. So be careful while using it. You can also use Medialize jQuery contextMenu polyfill to support HTML5 contextmenu in not supported browsers.
Conclusion
contextmenu attribute doesn’t let us customize the items in default context menu. Using it we need to completely create a new context menu. But HTML contextmenu attribute lets us add new items to browser default context menu. But you cannot create a completely new one using contextmenu attribute. If you like this post we “Like and Share”.
@narayanprusty
Leave a Reply