ClassyContextMenu
Context menus for your site, via jQuery!

ClassyContextMenu is a jQuery plugin written by Marius Stanciu - Sergiu, 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. Right Click Me!

• 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)

Download it

First you need to include the jQuery library, since ClassyContextMenu is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyContextMenu javascript and the css file into your page. You can do it by adding the code below to your page.

Next, you implement the structure for the menu. This can be done two ways: either pure HTML using lists and divs OR you can pass a JavaScript object to the ClassyContextMenu() function. I'll present the first method here.

    

        
Menu Item 1
        
Menu Item 2
        
Menu Item 3
        

            
Menu Item 3.1
            
Menu Item 3.2
            
Menu Item 3.3
            

                
Menu Item 3.3.1
                
Menu Item 3.3.2
                
Menu Item 3.3.3
                
Menu Item 3.3.4
            
            
            
Menu Item 3.4
        
        
        
Menu Item 4
    

As the last step, you trigger the ClassyContextMenu function on the element you just created. In this case, we trigger the menu on the element with the id simpleCallback and we build the menu from the element with the id simpleCallbackMenu.

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

• Parameters

  ---

• 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

• 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