Easy Customizable jQuery Context Menu Plugin - Our Context Menu

Our Context Menu is a jQuery plugin which helps you bind a customizable and themeable context menu to the right click event within a specific container.

How to use it:

1. Load a theme CSS of your choice into the document's head section.

<link href="dist/css/ourcontextmenu.cosmo.css" rel="stylesheet">
<!-- or -->
<link href="dist/css/ourcontextmenu.darkly.css" rel="stylesheet">
<!-- or -->
<link href="dist/css/ourcontextmenu.default.css" rel="stylesheet">
<!-- or -->
<link href="dist/css/ourcontextmenu.flatly.css" rel="stylesheet">
<!-- or -->
<link href="dist/css/ourcontextmenu.superhero.css" rel="stylesheet">
<!-- or -->
<link href="dist/css/ourcontextmenu.youtube.css" rel="stylesheet">

2. Create the context menu from an html unordered list and used html5 data-value to specify the value for each option.

<ul class="our-context-menu" id="context-menu">
  <li data-option="0">Home</li>
  <li data-option="1">Lorem ipsum dolor sit amet</li>
  <li data-option="2">Lorem ipsum dolor sit amet</li>
  <li data-option="3">Lorem ipsum dolor sit amet</li>
  <li data-option="4">Lorem ipsum dolor sit amet</li>
</ul>

3. Load jQuery library and the jQuery Our Context Menu plugin at the end of the document to improvde the page load speed.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="dist/js/ourcontextmenu.js"></script>

4. Initialize the plugin and specify the container in which the context menu should be displayed.

var settings = {
    target: $('#target-container'),
};
$('#context-menu').ourcontextmenu(settings);

5. More plugin settings.

var settings = {

    target: $('#target-container'),

    // Handles the click on the context menu. 
    // It receives as first parameter the DOM element (LI element selected with jQuery), so can you retrieve properties added with [data-] attributes.
    // For example:
    // onAction:function($SelectedLIelement){
    //   console.log($SelectedLIelement);
    // },
    onAction: function(){},

    // executed before the menu contextual is shown
    beforeShown: function(){},

    // triggered when the menu hides
    onHide: function(){},

};

$('#context-menu').ourcontextmenu(settings);

6. You can also create your own themes like this:

.our-context-menu {
  ...
}

.our-context-menu li {
  ...
}

.our-context-menu li:hover { 
  ... 
}

---

This awesome jQuery plugin is developed by sdkcarlos. For more Advanced Usages, please check the demo page or visit the official website.