ClassyContextMenu - Context menus for your site

ClassyContextMenu is a plugin that makes it easy to add right-click context menu functionality to any web application. A context menu can help make a web application feel even more like a native application.

• supports keyboard control
• always stays in viewport (menus never open outside of the visible area)
• supports infinite amount of sub-menus
• enable disable items or entire menus
• add and remove items and let the menu refresh
• add separators between groups of similar items
• show non-menu items like images or forms
• supports right- or left-click control
• multiple elements can share menus
• menus automatically resize based on menu contents
• build menus with HTML or pass in a JavaScript object
• customizable callbacks for each menu (onLoad, onShow, onHide, and onSelect)

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: class.pm

1. INCLUDE JS AND CSS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.classycontextmenu.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycontextmenu.min.css" />

2. HTML

<div id="simpleCallbackMenu">
    <ul>
        <li id="MenuItem1"><img src="images/icon1.png" /><a href="#Item1">Menu Item 1</a></li>
        <li id="MenuItem2"><a href="#Item2">Menu Item 2</a></li>
        <li id="MenuItem3"><a href="#Item3">Menu Item 3</a>
        <ul>
            <li id="MenuItem3.1"><a href="#Item3.1">Menu Item 3.1</a></li>
            <li id="MenuItem3.2"><a href="#Item3.2">Menu Item 3.2</a></li>
            <li id="MenuItem3.3"><a href="#Item3.3">Menu Item 3.3</a>
            <ul>
                <li id="MenuItem3.3.1"><a href="#Item3.3.1">Menu Item 3.3.1</a></li>
                <li id="MenuItem3.3.2"><a href="#Item3.3.2">Menu Item 3.3.2</a></li>
                <li id="MenuItem3.3.3"><a href="#Item3.3.3">Menu Item 3.3.3</a></li>
                <li id="MenuItem3.3.4"><a href="#Item3.3.4">Menu Item 3.3.4</a></li>
            </ul>
            </li>
            <li id="MenuItem3.4"><a href="#Item3.4">Menu Item 3.4</a></li>
        </ul>
        </li>
        <li id="MenuItem4" class="separator"><a href="#Item4">Menu Item 4</a></li>
    </ul>
</div>

3. JAVASCRIPT

$('#simpleCallback').ClassyContextMenu({
    menu: 'simpleCallbackMenu'
});

4. OPTIONS

• menu - id of the element containing the menu DOM structure or an array with the menu items
• mouseButton - sets which button causes the menu to appear, can be left or right, default is right
• minWidth - minimal width of the menu in pixels, default is 120
• maxWidth - maximum width of the menu, 0 means no maximum, default is 0
• delay - the delay in milliseconds before the sub-menu vanishes, default is 500
• keyboard - enables or disables the keyboard control, can be true or false, default is true
• hoverIntent - should use the hoverIntent jQuery plugin, can be true or false, default is true

5. CALLBACKS

• onSelect - callback function to be called when a user clicks on a menu item
• onLoad - callback function to be called when the menu is done building
• onShow - callback function to be called when the menu is shown
• onHide - callback function to be called when the menu is hidden