Sometimes it is required to show a custom context menu instead of the browser default one when right-clicking on the webpage or on a specific element.
By doing that it is possible to show a context menu according to the element and disable the default menu where necessary.
It is customizable according to the website design.
For implementing this I am using jQuery in this tutorial.
When right-clicking on the element then disable the browser default context menu and display the custom options.
Contents
1. HTML
Create some <h2> elements. To display context menu create <div class='context-menu'>.
Where list color options in <ul> element.
With jQuery I popup this <div> when right-click on the <h2> element.
Also, create a hidden element to track the <h2> element when right clicked and perform the action on it.
Completed Code
<div class="container">
<!-- Titles -->
<h2 id='post_1'>Dynamically add and remove element with jQuery</h2>
<h2 id='post_2'>How to Delete a value from an Array in JavaScript</h2>
<h2 id='post_3'>Read and Get Parameters from URL with JavaScript</h2>
<h2 id='post_4'>HTML - How to Show Text Above Image on Hover</h2>
<!-- Context-menu -->
<div class='context-menu'>
<ul>
<li><span class='Gainsboro'></span> <span>Gainsboro </span></li>
<li><span class='Orange'></span> <span>Orange</span></li>
<li><span class='Plum'></span> <span>Plum</span></li>
</ul>
</div>
<input type='hidden' value='' id='txt_id'>
</div>
2. CSS
I set the .context-menu class position: absolute; and display: none; for hiding the menu first time.
Completed Code
.container{
border-radius:3px;
padding:5px;
width: 60%;
margin: 0 auto;
}
h2{
font-weight: normal;
font-size: 25px;
}
h2:hover{
cursor: pointer;
}
/* Context menu */
.context-menu{
display: none;
position: absolute;
border: 1px solid black;
border-radius: 3px;
width: 200px;
background: white;
box-shadow: 10px 10px 5px #888888;
}
.context-menu ul{
list-style: none;
padding: 2px;
}
.context-menu ul li{
padding: 5px 2px;
margin-bottom: 3px;
color: white;
font-weight: bold;
background-color: darkturquoise;
}
.context-menu ul li:hover{
cursor: pointer;
background-color: #7fffd4;
}
/* Colors */
.Gainsboro ,.Orange ,.Plum {
width:15px;
height:15px;
border: 0px solid black;
display: inline-block;
margin-right: 5px;
}
.Gainsboro {
background-color: Gainsboro ;
}
.Orange {
background-color: Orange ;
}
.Plum {
background-color: Plum ;
}
3. jQuery
Enabling custom context-menu on <h2>
I am showing context-menu on <h2> right-click for this I bind contextmenu event on <h2>. Here, storing the id in the hidden field $("#txt_id").val(id), this value is been used when a custom menu list item gets clicked.
Position menu on the clicked area and displaying it.
// disable right click and show custom context menu
$("h2").bind('contextmenu', function (e) {
var id = this.id;
$("#txt_id").val(id);
var top = e.pageY+5;
var left = e.pageX;
// Show contextmenu
$(".context-menu").toggle(100).css({
top: top + "px",
left: left + "px"
});
// disable default context menu
return false;
});
Hide context menu when to click or right-click outside
Bind contextmenu and click event on the document to hide the custom menu and remove the hidden field id.
$(document).bind('contextmenu click',function(){
$(".context-menu").hide();
$("#txt_id").val("");
});
Disable default menu from custom context menu
// disable context-menu from custom menu
$('.context-menu').bind('contextmenu',function(){
return false;
});
Perform action on the list item
Finding the class name of the first <span > element on the clicked list item and using this class name to add the background color on the id stored in the hidden field.
// Clicked context-menu item
$('.context-menu li').click(function(){
var className = $(this).find("span:nth-child(1)").attr("class");
var titleid = $('#txt_id').val();
$( "#"+ titleid ).css( "background-color", className );
$(".context-menu").hide();
});
Completed Code
$(document).ready(function(){
// disable right click and show custom context menu
$("h2").bind('contextmenu', function (e) {
var id = this.id;
$("#txt_id").val(id);
var top = e.pageY+5;
var left = e.pageX;
// Show contextmenu
$(".context-menu").toggle(100).css({
top: top + "px",
left: left + "px"
});
// disable default context menu
return false;
});
// Hide context menu
$(document).bind('contextmenu click',function(){
$(".context-menu").hide();
$("#txt_id").val("");
});
// disable context-menu from custom menu
$('.context-menu').bind('contextmenu',function(){
return false;
});
// Clicked context-menu item
$('.context-menu li').click(function(){
var className = $(this).find("span:nth-child(1)").attr("class");
var titleid = $('#txt_id').val();
$( "#"+ titleid ).css( "background-color", className );
$(".context-menu").hide();
});
});
4. Demo
5. Conclusion
I hope the tutorial, helps you to implement a custom context menu on the selector element and add some actions.
If you found this tutorial helpful then don't forget to share.