Custom Right Click Context menu with jQuery

Sometimes we have required displaying the custom context menu instead of Web Browser default one.

By doing that you can set menu according to the element and you have full control over it. You can theme or design it according to your website, add actions, show only those items in the menu which requires.

How to implement it ?

For implementing this I am using jQuery which disable the default Right click and show the custom menu.

What in the demonstration ?

Within demonstration, I am creating the list of elements when the user right clicks on one of it then showing the custom context-menu options.

And also creating a hidden field which stores the id of the Right-clicked element based on that we perform an action on that only.

Custom right click Context menu with jQuery


Contents

  1. HTML
  2. CSS
  3. jQuery
  4. Demo
  5. Conclusion

1. HTML

Showing menu when the contextmenu event triggers on <h1> element.

Here, with <h1> tag also adding ids to them for detecting which one gets Right-click. This helps us when performing the action on the <h1> element from the menu.

Using hidden field id="txt_id" for storing the <h1> id.

Within context-menu, I am showing color names.

Completed Code

<div class="container">

 <!-- Titles -->
 <h1 id='post_1'>Dynamically add and remove element with jQuery</h1>
 <h1 id='post_2'>How to Delete a value from an Array in JavaScript</h1>
 <h1 id='post_3'>Read and Get Parameters from URL with JavaScript</h1>
 <h1 id='post_4'>HTML - How to Show Text Above Image on Hover</h1>

 <!-- Context-menu -->
 <div class='context-menu'>
 <ul>
 <li><span class='Gainsboro'></span>&nbsp;<span>Gainsboro </span></li>
 <li><span class='Orange'></span>&nbsp;<span>Orange</span></li>
 <li><span class='Plum'></span>&nbsp;<span>Plum</span></li>
 </ul>
 </div>

 <input type='hidden' value='' id='txt_id'>
</div>

2. CSS

Applying some 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;
}

h1{
 font-weight: normal;
 font-size: 25px;
}
h1: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

I explain it in parts –

Enabling custom context-menu on <h1>

I am showing context-menu on <h1> right-click for this I bind contextmenu event on <h1>.  Here, storing the id in hidden field $("#txt_id").val(id), this value is being when custom menu list item gets clicked.

Position menu on clicked area and displaying it.

// disable right click and show custom context menu
 $("h1").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
 $("h1").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

Right-click on one of the title to open custom context-menu.


5. Conclusion

I showed how you can implement your own context menu and add action to them.

In the demonstration, I changed the background color of the element based on the color selection from context-menu. You can customize it and add your own actions within your project.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *