$(document).ready(function () {
$(".parent").jQContextMenu({
selector: ".showMenu",
target: "#menu",
// Always position to the left of the context element.
position: function (options, x, y) {
var element = options.currentElement[0];
var menu = options.menuParent;
var diffHeight = element.offsetHeight - menu.height();
menu.css({ top: element.offsetTop + diffHeight, left: element.offsetLeft });
},
itemClick: function (event, ui) {
var text = $(ui.items[0]).text();
alert("You clicked on " + text);
}
});
});
<div class="parent" style="z-index:20; color:white; margin-left:20%; margin-right:20% ">
<span style="color:#4E4D4D; font-size:24px; font-family:Segoe UI;">Custom Menu Position</span>
<div class="showMenu" style="margin-top:30px; padding: 60px 60px 60px 120px; background-color:rgb(163, 163, 163); font-size:25px;">Right Click here to Show Context Menu</div>
<div style="color:#4E4D4D; margin-top:50px; font-size:18px; font-family:Segoe UI;">This sample illustrates how to change the Context Menu current position</div>
</div>
<ul id="menu">
<li><span class="ui-icon ui-icon-scissors"></span>Cut</li>
<li><span class="ui-icon ui-icon-copy"></span>Copy</li>
<li><span class="ui-icon ui-icon-copy"></span>Paste</li>
<li>-----</li>
<li>Edit</li>
<li>Other Options<ul><li>Option1</li><li>Option2</li></ul></li>
</ul>
<br/>
<p><font size="3"><b>Source for this<a target="_blank"href="http://jqfaq.com/jquery-ui-context-menu-plugin/"</a> JQFaq Question</b></font></p>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%;border:none;" />
External resources loaded into this fiddle: