Skip to content
A really simple, good looking jQuery context menu
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE.txt Add license Jul 21, 2011
README.md Add a Bitdeli badge to README Dec 17, 2013
jquery.contextmenu.css added enabled/disabled support Nov 12, 2013
jquery.contextmenu.js Addition of classes to some items, to allow for more accurate styling… Feb 17, 2015
simplecontextmenu.jquery.json

README.md

A Simple Good Looking Context Menu, for jQuery

Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good.

This one is easy to use, small, and looks good.

Demo

Features

  • Tiny library. Only dependency is jQuery.
  • Simple API.
  • Looks good out of the box, with no additional tweaking.
  • Designed to look and behave like a standard Windows context menu.
  • There's so little code, it should be easy to add your own custom features.

The menu looks like this:

Screenshot

Installation

Include the files jquery.contextmenu.css and jquery.contextmenu.js in your page <head>. You also need jQuery. It is recommended that you use the HTML 5 DOCTYPE to ensure rendering consistency.

<!DOCTYPE html>
<html>
  <head>
     <script src="jquery-1.6.2.min.js"></script> 
     <script src="jquery.contextmenu.js"></script> 
     <link rel="stylesheet" href="jquery.contextmenu.css">
     ... rest of your stuff ...

You can get the files from here:

Usage

The plugin introduces a contextPopup() method to the jQuery object.

Assuming you have an element that you'd like to bind a context menu to:

<div id="mythingy">hello</div>

You can wire up a context menu like this:

$('#mythingy').contextPopup({
  title: 'My Popup Menu',
  items: [
    {label:'Some Item',     icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } },
    {label:'Another Thing', icon:'icons/receipt-text.png',    action:function() { alert('clicked 2') } },
    null, /* null can be used to add a separator to the menu items */
    {label:'Blah Blah',     icon:'icons/book-open-list.png',  action:function() { alert('clicked 3') }, isEnabled:function() { return false; } },
  ]});

The 'isEnabled' function is optional. By default all items are enabled.

Icons

The icons should be 16x16 pixels. I recommend the Fugue icon set (shadowless).

kthxbye

-joe

Bitdeli Badge

You can’t perform that action at this time.