What is the contextMenu?
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:
The context menu uses the font awesome icons, so include its CSS reference as well:
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>
Download links:
jQuery/JS of contextMenu
CSS file of contextMenu
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.
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:
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>
Full code:
<!DOCTYPE html>
<html lang="en">
<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 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>
</head>
<body>
<div class="box" id="box1">Right click to open the menu</div>
<div class="box" id="box2">Right click to open the menu</div>
<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>Cut (ctrl+x)",
action: function () {
console.log("??");
}
},
{
text: "<i class='fa fa-copy site-cm-icon'></i>Copy (ctrl+c)"
},
{
text: "<i class='fa fa-paste site-cm-icon'></i>Paste (ctrl+v)",
action: function () {
console.log("??");
}
}
],
[
{
text: "<i class='fa fa-bold site-cm-icon'></i>Bold (ctrl+b)"
},
{
text: "<i class='fa fa-italic site-cm-icon'></i>Italic (ctrl+i)"
},
{
text: "<i class='fa fa-underline site-cm-icon'></i>Underline (ctrl+u)"
}],
[
{
text: "<i class='fa fa-font site-cm-icon'></i>Font"
}],
[
{
text: "<i class='fa fa-subscript site-cm-icon'></i>Subscript (ctrl+=)"
},
{
text: "<i class='fa fa-superscript site-cm-icon'></i>Superscript(ctrl+shift++)"
}
]
];
var data2 = [
[
{
text: "<i class='fa fa-cut site-cm-icon'></i>Cut (ctrl+x)"
},
{
text: "<i class='fa fa-copy site-cm-icon'></i>Copy (ctrl+c)"
},
{
text: "<i class='fa fa-paste site-cm-icon'></i>Paste (ctrl+v)"
}
]
];
$("#box1").contextMenu(data);
$("#box2").contextMenu(data2, {
name: "box2"
});
</script>
</body>
</html>
A demo of adding a 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:
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.
A demo of context menu in form fields
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.
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>