jQuery Contextual Menu: Show a context sensitive menu help plugin

Recommend this page to a friend!

Download

Info

Example

Demos

Files

Download

Reputation

Support forum

Blog

Links

Last Updated		Ratings				Unique User Downloads		Download Rankings
2025-07-09 (2 days ago)		Not yet rated by the users				Total: 253		All time: 186 This week: 4

Version		License		JavaScript version		Categories
`contextual-menu` 1.4		MIT/X Consortium ...		1.0		HTML, jQuery

Description

Author

Daniele Cruciani

This is a jQuery plugin to show a context sensitive menu under the mouse pointer.

It listens to mouse clicks over given HTML page elements and makes a context menu appear when the right mouse button is opened.

The menu is defined by the text of each menu option to display and the respective callback functions that are called when the menu options are clicked.

Innovation Award

June 2014
Winner

Prize: One downloadable e-book of choice by O'Reilly

Contextual menus are very useful to let the users perform actions specific to the user interface elements under the current mouse pointer position.

This jQuery plugin can build and show a context menu over given HTML page elements that is very easy to customize the menu actions.

Manuel Lemos

Daniele Cruciani

Performance

Level

Name:	Daniele Cruciani `<contact>`
Classes:	2 packages by Daniele Cruciani
Country:	Italy
Age:	49
All time rank:	88	2 in Italy
Week rank:	6	1 in Italy

Level 2

Innovation award

Nominee: 1x

Winner: 1x

Example

<!DOCTYPE html>
<html>
<head>
<title>example Context Menu</title>
<link href="contextmenu.css" media="all" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="jquery.contextmenu.js"></script>
<script>
function func1(e,el){
  alert(el.tagName);
}
function func2(e,el){
  alert(el.tagName);
}
$(document).ready(function(){
  $(".linkimg").contextmenu({'option 1':func1,
                              'option 2':func2},
                              'hold',1000);
});
</script>
<style>
.linkimg {
width: 200px;
float:left;
height:300px;
background-color: #11ff11;
display:block;
}
</style>
</head>
<body>

<div class="linkimg" title="hold button 1 on this area">
div 1
</div>

<span class="linkimg" title="hold button 1 on this area">
span 2
</span>

</body>
</html>

Details

jquery-contextual-menu
=

A configurable context menu. It act on right click, hover (with time lag), hold (with lag)

text.html show hold with 1sec of lag.

The project home is in http://www.smartango.com/articles/jquery-context-menu


USE:
---

    func1= function(event, element) { };
    func2= function(event, element) { };
    jQuery(".linkimg").contextmenu({'option 1':func1,
                              'option 2':func2},
                              'hold',1000);

Second option is 'hold','right' or 'hover'

Parameters are passed to callback function
=

Callback function has event and element as input. The ratio is to have, say, the exact position where pointer was when right clicked (i.e. use it in canvas too)

jquery context menu article and demo

Files (6)

File	Role	Description
`bower.json`	Data	bower definition
`contextmenu.css`	Data	Auxiliary data
`contextmenu.jquery.json`	Data	jQuery manifest
`jquery.contextmenu.js`	Class	Class source
`README.md`	Data	Documentation
`test.html`	Example	Documentation