Right click on page to display menu.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Menu - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Basic Menu</h2> <p>Right click on page to display menu.</p> <div style="margin:20px 0;"></div> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> <div> <span>M1</span> <div style="width:120px;"> <div>sub1</div> <div>sub2</div> <div> <span>Sub</span> <div style="width:80px;"> <div onclick="javascript:alert('sub21')">sub21</div> <div>sub22</div> <div>sub23</div> </div> </div> <div>sub3</div> </div> </div> <div> <span>Window Demos</span> <div style="width:120px;"> <div data-options="href:'window.html'">Window</div> <div data-options="href:'dialog.html'">Dialog</div> <div><a href="http://www.jeasyui.com" target="_blank">EasyUI</a></div> </div> </div> </div> </div> <div data-options="iconCls:'icon-save'">Save</div> <div data-options="iconCls:'icon-print',disabled:true">Print</div> <div class="menu-sep"></div> <div>Exit</div> </div> <script> $(function(){ $(document).bind('contextmenu',function(e){ e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }); }); </script> </body> </html>