Hit enter after type your search item

3 Demos of jQuery Context / right click Menu plug-in

What is the contextMenu?

The contextMenu is a lightweight solution for creating the contextual menus in your web pages. The contextMenu will display as a user right clicks on a DOM element.

You may associate this context menu plug-in with different elements in DOM like a div, form, table etc. You may easily customize the look and feel of the context menu by using simple CSS.

Developer’s page  Download plug-in Demo

How to set up this plug-in on your website?

First of all, download the plug-in from the above links. Get the contextMenu.min.css file and refer it in the <head> section:

<link rel=”stylesheet” href=”css/contextMenu/contextMenu.min.css”>

The context menu uses the font awesome icons, so include its CSS reference as well:

<link rel=”stylesheet” href=”//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css”>

Under the <body> tag, include the jQuery and contextMenu.min.js files:

  <script src=”//cdn.bootcss.com/jquery/1.12.4/jquery.min.js”></script>

<script src=”js/contextMenu/contextMenu.min.js”></script>

Use the markup where you intend to display the context menu upon right clicking by the user, for example:


 

In the script section, create the items of the menu by using JavaScript like this:


 

Initiate the plug-in:


Have a look at the demos and complete code in the section below.

A demo of creating context menu

In this demo, a few menu items like cut, copy, paste, underline, bold etc. are created. Right click on any box to open the context menu that will override the default browser menu:

jQuery context menu

See online demo and code

The markup used for this demo:

 


 

A little CSS for the boxes (it will be your own CSS with respect to the element):


 

Get the complete code from the demo page.

A demo of adding context menu in HTML table

As mentioned earlier, you may add this context menu plug-in in any HTML element including HTML tables. In this demo, a table is created with a few rows and applied a little CSS for borders and other properties.

As you right click in the table, the context menu will appear with four menu items i.e.

  • Add row
  • Remove Row
  • Edit Data
  • Hide Row

The arbitrary font awesome icons are used that you will replace in accordance with the action to be performed for your project. Have a look:

jQuery context menu table

See online demo and code

The complete code for this demo:


 

You need to adjust the plug-in CSS and JS files path as per the physical location of your page.

A demo of context menu in form fields

Just to show you diversity, in this demo I have added the contextual menu with four items in a form which is created by using the Bootstrap framework.

The form contains two fields i.e. Name and Email. As you right click on any textbox the contextual menu will appear with four items. Have a look:

jQuery context menu form

See online demo and code

The complete code:


Grab the code by visiting the demo page.
This div height required for enabling the sticky sidebar