jquery contextmenu plugin demo

jquery contextmenu plugin demo

by humanzing

HTML

<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700&subset=latin,cyrillic'
          rel='stylesheet' type='text/css'>

   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/js/main.js" type="text/javascript"></script>

<span class="context-menu-one btn btn-neutral">right click me</span>

CSS

body {
  background: red;
  background: url(https://i.imgur.com/icu9yIJ.jpg) no-repeat center center fixed !important;
}
.context-menu-list,.context-menu-root,.context-menu-item,.context-menu-list{
  list-style:none;
  padding:0;  
  margin:0;

}
.context-menu-list{
position: relative;
display: inline-block;
min-width: 13em;
max-width: 26em;
padding: .25em 0;
margin: .3em;
font-family: inherit;
font-size: inherit;
list-style-type: none;
background: #fff;
border: 1px solid #bebebe;
border-radius: .2em;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    background: url(https://upload.wikimedia.org/wikipedia/commons/6/6e/MacOS_High_Sierra_Desktop.jpg) no-repeat center right fixed !important;
  backdrop-filter: blur(5px);
}
.context-menu-item{
 position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: .2em 2em;
color: #2f2f2f;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
background-color: rgba(0,0,0,0) !important;
}
.context-menu-item:hover{
  color:#fff;
  cursor:pointer;
}
.context-menu-submenu:hover > ul{
  display:block;
   background: url(https://upload.wikimedia.org/wikipedia/commons/6/6e/MacOS_High_Sierra_Desktop.jpg) no-repeat center right fixed !important;
  backdrop-filter: blur(5px)!important;
}
.context-menu-submenu > ul > li{
  background: url(https://upload.wikimedia.org/wikipedia/commons/6/6e/MacOS_High_Sierra_Desktop.jpg) no-repeat center right fixed !important;
  backdrop-filter: blur(5px)!important;
}
.context-menu-submenu > ul{
  margin:0;  
  padding:0;
  left:0;
   background: url(https://upload.wikimedia.org/wikipedia/commons/6/6e/MacOS_High_Sierra_Desktop.jpg) no-repeat center right fixed !important;
  backdrop-filter: blur(5px)!important;
  }
.context-menu-list{
    display:none;
    background:...

JavaScript

$(function () {

    $.contextMenu({
        selector: '.context-menu-one',
        /*callback: function (key, options) {   
        		console.log("key = ", key, "  options = ", options);
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);                        
            alert("Clicked on " + key + " on element " + options.$trigger.attr('id').substr(3));

        },*/
        callback: function(itemKey, opt, rootMenu, originalEvent) {
					console.log('itemKey = ',itemKey, " opt = ", opt, "  rootMenu = ", rootMenu, "  originalEvent = ", originalEvent);
        },
        items: {
            "edit": { "name": "Edit", "icon": "edit" },           
            "fold1": {
                "name": "Apply for Section",
                "items": {
                    "Section I": { "name": "Section I" },
                    "Section II": { "name": "Section II" },
                    "Section III": { "name": "Section III" }
                }
            },
            "fold2": {
                "name": "Sub group",
                "items": {
                    "fold1-key1": { "name": "Foo bar" },
                    "fold2": {
                        "name": "Sub group 2",
                        "items": {
                            "fold2-key1": { "name": "Sub group 1" },
                            "fold2-key2": { "name": "Sub group 2" },
                            "fold2-key3": { "name": "Sub group 3" }
                        }
                    },
                    "fold1-key3": { "name": "delta" }
                }
            },
            "fold1a": {
                "name": "Other group",
                "items": {
                    "fold1a-key1": { "name": "Other group1" },
                    "fold1a-key2": { "name": "Other group2" },
                    "fold1a-key3": { "name": "Other group3" }
                } }  }  }); });