JqxMenu

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
    <div id="dropDownButton">
        <div style="border: none;" id='jqxTree'>
            <ul>
                <li item-selected='true'>Home</li>
                <li item-expanded='true'>Solutions
                    <ul>
                        <li>Education</li>
                        <li>Financial services</li>
                        <li>Government</li>
                        <li>Manufacturing</li>
                        <li>Solutions
                            <ul>
                                <li>eLearning</li>
                                <li>Mobile</li>
                                <li>RIA</li>
                                <li>Training</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Products
                    <ul>
                        <li>PC products</li>
                        <li>Mobile products</li>
                        <li>All products</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id='jqxMenu'>
    <ul>
        <li><a href="#">Новая папка</a>
        </li>
        <li><a href="#">Переименовать</a>
        </li>
        <li><a href="#">Удалить</a>
        </li>
    </ul>
</div>
<div id='jqxWidget2' style='vertical-align: middle; text-align: center; background: #eee;
            height: 400px; width: 400px;'> <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'>
                Right-Click here to Open the Menu </span>

</div>

JavaScript

$("#dropDownButton").jqxDropDownButton({
    width: 25,
    height: 25
}).on("close", function (e) {
    $("#jqxMenu").jqxMenu('close');
});
$('#jqxTree').on('select', function (event) {
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
    //$("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
});
$("#jqxTree").jqxTree({
    width: 200,
    height: 500
});

var contextMenu = $("#jqxMenu").jqxMenu({
    width: '125px',
    height: '83px',
    autoOpenPopup: false,
    mode: 'popup',
    popupZIndex: 999999
});

$("#jqxTree").on('mousedown', function (event) {
    var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice();
    if (rightClick) {
        var scrollTop = $(window).scrollTop();
        var scrollLeft = $(window).scrollLeft();

        var item = $('#jqxTree').jqxTree('hitTest', scrollLeft + event.clientX, scrollTop + event.clientY);

        if (item) {
            $("#jqxTree").jqxTree('selectItem', item);
            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);

        }
        return false;
    }
});
// disable the default browser's context menu.
$(document).on('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;
}