Custom Right Click Context menu with jQuery

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.

Custom Right Click Context menu with jQuery


Contents

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

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>&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

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

View 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.

Leave a Comment