What is the contextMenu?
The contextMenu is a lightweight solution for creating contextual menus on 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.
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 to it in the <head> section:
<link rel=”stylesheet” href=”css/contextMenu/contextMenu.min.css”>
Note: The plug-in is removed by the developer. However, you may still get the required files by visiting the demo below.
For that, right-click and “View Source” on the demo page and find the contextMenu.min.css. You may copy/paste or download the file there.
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:
<div class="box" id="box1">Right click to open the menu</div> <div class="box" id="box2">Right click to open the menu</div>
In the script section, create the items of the menu by using JavaScript like this:
var itmes2 = [
[
{
text: "<i class='fa fa-cut site-cm-icon'></i>Menu item 1 （ctrl+H）"
},
{
text: "<i class='fa fa-copy site-cm-icon'></i> Menu item 1 （ctrl+c）"
},
{
text: "<i class='fa fa-paste site-cm-icon'></i> Menu item 1 （ctrl+v）"
}
]
];
Initiate the plug-in:
$("#box1").contextMenu(items);
Have a look at the demos and complete code in the section below.
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:
See online demo and code
The markup used for this demo:
<div class="box" id="box1">Right click to open the menu</div> <div class="box" id="box2">Right click to open the menu</div>
A little CSS for the boxes (it will be your own CSS with respect to the element):
<style type="text/css">
html,body,ul,li{
margin:1px;
padding: 1px;
}
body{
font:13px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
}
.box{
width: 225px;
height:190px;
margin:50px auto;
text-align: center;
line-height: 150px;
}
#box1{
background-color: #B3D9D9;
}
#box2{
background-color: #2E5C5C;
color: #fff;
}
</style>
Get the complete code from the demo page.
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:
The complete code for this demo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/contextMenu/contextMenu.min.css">
<style>
ul,li{
margin:1px;
padding: 1px;
}
/*Using CSS for table*/
.demotbl {
border-collapse: collapse;
border: 1px solid #69899F;
}
.demotbl th{
border: 2px solid #69899F;
color: #3E5260;
padding:10px;
}
.demotbl td{
border: 1px dotted black;
color: #002F5E;
padding:15px;
width:100px;
}
</style>
</head>
<body>
<p>A table with CSS properties</p>
<table class="demotbl" id="table-menu">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/contextMenu/contextMenu.min.js"></script>
<script type="text/javascript">
var data = [
[
{
text: "<i class='fa fa-cut site-cm-icon'></i>Add row",
action: function () {
console.log("剪切");
}
},
{
text: "<i class='fa fa-copy site-cm-icon'></i>Remove Row"
},
{
text: "<i class='fa fa-paste site-cm-icon'></i>Edit Data",
action: function () {
console.log("粘贴");
}
}
],
[
{
text: "<i class='fa fa-bold site-cm-icon'></i>Hide Row）"
},
]
];
$("#table-menu").contextMenu(data);
</script>
</body>
</html>
You need to adjust the plug-in CSS and JS files path as per the physical location of your page.
Just to show you diversity, in this demo, I have added the contextual menu with four items in a form that 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:
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/contextMenu/contextMenu.min.css">
<style>
html,body,ul,li{
margin:1px;
padding: 1px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Form demo</h1>
<form class="form-inline" id="form-menu">
<div class="form-group">
<label for="Name2">Your Name</label>
<input type="text" class="form-control" id="Name2" placeholder="Enter Name here">
</div>
<div class="form-group">
<label for="Email2">Email</label>
<input type="email" class="form-control" id="Email2" placeholder="Email here">
</div>
<button type="submit" class="btn btn-danger">Subscribe</button>
</form>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/contextMenu/contextMenu.min.js"></script>
<script type="text/javascript">
var data = [
[
{
text: "<i class='fa fa-cut site-cm-icon'></i>Copy",
action: function () {
console.log("剪切");
}
},
{
text: "<i class='fa fa-copy site-cm-icon'></i>Paste"
},
{
text: "<i class='fa fa-paste site-cm-icon'></i>Edit",
action: function () {
console.log("粘贴");
}
}
],
[
{
text: "<i class='fa fa-bold site-cm-icon'></i>Hide"
},
]
];
$("#form-menu").contextMenu(data);
</script>
</div>
</body>
</html>