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:
|
1 2 3 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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:
|
1 |
$("#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:
|
1 2 3 |
<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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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:
See online demo and code
The complete code for this demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<!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 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:
See online demo and code
The complete code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!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> |
Grab the code by visiting the demo page.