jQuery.contextMenu - wrapping submenu item in IE9
HTML
<link rel="stylesheet" href="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.css">
<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.ui.position.js"></script>
<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<div class="context-menu-one box menu-1">
<strong>without title</strong>
</div>
CSS
/* menu header */
.css-title:before {
content: "some title";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
background: #DDD;
padding: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.css-title :first-child {
margin-top: 20px;
}
/* menu header via data attribute */
.data-title:before {
content: attr(data-menutitle);
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
background: #DDD;
padding: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.data-title :first-child {
margin-top: 20px;
}
/* demo trigger boxes */
.box {
color: #EEE;
background: #666;
font-weight: bold;
padding: 20px;
text-align: center;
font-size: 20px;
margin: 5px 0;
}
.box:hover {
background: #777;
}
.box > * {
display:block;
}
.menu-injected { background-color: #C87958; }
.box.context-menu-disabled { background-color: red; }
JavaScript
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy This to the Clipboard Please", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"submenu": { name : "Submenu",
items : {
"submenu_item1" : {
// NOTE: this is the item that wraps in IE9 but not in Firefox
name : "Change Reporting Interval"
},
"submenu_item2" : {
name : "Item 2"
}
}
},
"quit": {name: "Quit", icon: "quit"}
}
});
});