Download Easy Customizable jQuery Context Menu Plugin – Our Context Menu

This time I will share jQuery Plugin and tutorial about Easy Customizable jQuery Context Menu Plugin – Our Context Menu, hope it will help you in programming stack.

File Size:	21.9 KB
Views Total:	639
Last Update:	5 years ago
Publish Date:	5 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

01
<link href="dist/css/ourcontextmenu.cosmo.css" rel="stylesheet">

02
<!-- or -->

03
<link href="dist/css/ourcontextmenu.darkly.css" rel="stylesheet">

04
<!-- or -->

05
<link href="dist/css/ourcontextmenu.default.css" rel="stylesheet">

06
<!-- or -->

07
<link href="dist/css/ourcontextmenu.flatly.css" rel="stylesheet">

08
<!-- or -->

09
<link href="dist/css/ourcontextmenu.superhero.css" rel="stylesheet">

10
<!-- or -->

11
<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.

1
<ul class="our-context-menu" id="context-menu">

2
  <li data-option="0">Home</li>

3
  <li data-option="1">Lorem ipsum dolor sit amet</li>

4
  <li data-option="2">Lorem ipsum dolor sit amet</li>

5
  <li data-option="3">Lorem ipsum dolor sit amet</li>

6
  <li data-option="4">Lorem ipsum dolor sit amet</li>

7
</ul>

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

`1`	`<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>`

`2`	`<script src="dist/js/ourcontextmenu.js"></script>`

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

1
var settings = {

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

3
};

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

5. More plugin settings.

01
var settings = {

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

04
 
05
    // Handles the click on the context menu. 

06
    // It receives as first parameter the DOM element (LI element selected with jQuery), so can you retrieve properties added with [data-] attributes.

07
    // For example:

08
    // onAction:function($SelectedLIelement){

09
    //   console.log($SelectedLIelement);

10
    // },

11
    onAction: function(){},

12
 
13
    // executed before the menu contextual is shown

14
    beforeShown: function(){},

15
 
16
    // triggered when the menu hides

17
    onHide: function(){},

18
 
19
};

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

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

01
.our-context-menu {

02
  ...

03
}

04
 
05
.our-context-menu li {

06
  ...

07
}

08
 
09
.our-context-menu li:hover { 

10
  ... 

11
}

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

source : jqueryscript.net

How to use it:

Share this:

Related posts: