jQuery Menu

Invoke the open method of the jqxMenu . Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee;
            height: 400px; width: 400px;'>
    <div id='jqxMenu'>
        <ul>
            <li><a href="#">Home</a>

            </li>
            <li>About Us
                <ul>
                    <li><a href="#">History</a>

                    </li>
                    <li><a href="#">Our Vision</a>

                    </li>
                </ul>
            </li>
            <li>Services
                <ul style='width:200px;'>
                    <li><a href="#">Product Development</a>

                    </li>
                    <li><a href="#">Delivery</a>

                    </li>
                </ul>
            </li>
            <li>Products</li>
            <li><a href="#">Contact Us</a> 
            </li>
        </ul>
    </div> <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'>
                Right-Click here to Open the Menu </span>

</div>

JavaScript

// Create a jqxMenu
   var contextMenu = $("#jqxMenu").jqxMenu({
       width: '120px',
       height: '140px',
       autoOpenPopup: false,
       mode: 'popup'
   });
   // open the context menu when the user presses the mouse right button.
   $("#jqxWidget").bind('mousedown', function (event) {
       var rightClick = isRightClick(event);
       if (rightClick) {
           var scrollTop = $(window).scrollTop();
           var scrollLeft = $(window).scrollLeft();
           contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
           return false;
       }
   });
   // disable the default browser's context menu.
   $(document).bind('contextmenu', function (e) {
       return false;
   });

   function isRightClick(event) {
       var rightclick;
       if (!event) var event = window.event;
       if (event.which) rightclick = (event.which == 3);
       else if (event.button) rightclick = (event.button == 2);
       return rightclick;
   }