Note: Script completely rewritten Dec 16th 2009'

Description: This jQuery script lets you associate a multi-level context menu to any element on the page, so right clicking within the element activates the menu. The default context menu of the browser is suppressed as a result. A different context menu can be added to different elements on the page, such as one for the document as a whole, another for just a DIV on the page etc.

Note that Opera as of Opera 10 does not yet support replacing the browser's default context menu with a custom one, and hence this script will not work in it.

Demo (right click inside the below two elements, or any image on this page for that matter):

Item 1a Item 2a Item 1a Item 2a

Dynamic Drive Item 1a Item 2a Item Folder 3a Sub Item 3.1a Sub Item 3.2a Sub Item 3.3a Sub Item 3.4a Item 4a Item Folder 5a Sub Item 5.1a Item Folder 5.2a Sub Item 5.2.1a Sub Item 5.2.2a Sub Item 5.2.3a Sub Item 5.2.4a Item 6a

Here we've defined two context menus, one associated with a specific link, the other, all images on the page.

---

Directions

Step 1: This script uses three external files, including an image. Download them below (right click, and select "Save As"):

• jqcontextmenu.js
• jqcontextmenu.css
• arrow.gif

Step 2: Add the below code to the HEAD section of your page:

Select All
<link rel="stylesheet" type="text/css" href="jqcontextmenu.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jqcontextmenu.js"> /*********************************************** * jQuery Context Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> //Usage: $(elementselector).addcontextmenu('id_of_context_menu_on_page') //To apply context menu to entire document, use: $(document).addcontextmenu('id_of_context_menu_on_page') jQuery(document).ready(function($){ $('a.mylinks').addcontextmenu('contextmenu1') //apply context menu to links with class="mylinks" }) jQuery(document).ready(function($){ $('img').addcontextmenu('contextmenu2') //apply context menu to all images on the page }) </script>

Step 2: Having done the above, add the below sample HTML to the BODY of your page, which contains a link and an image, plus two context menus associated with them:

Select All
<p><a class="mylinks" href="http://www.dynamicdrive.com">Dynamic Drive</a></p> <p><img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" /></p> <!--HTML for Context Menu 1--> <ul id="contextmenu1" class="jqcontextmenu"> <li><a href="#">Item 1a</a></li> <li><a href="#">Item 2a</a></li> <li><a href="#">Item Folder 3a</a> <ul> <li><a href="#">Sub Item 3.1a</a></li> <li><a href="#">Sub Item 3.2a</a></li> <li><a href="#">Sub Item 3.3a</a></li> <li><a href="#">Sub Item 3.4a</a></li> </ul> </li> <li><a href="#">Item 4a</a></li> <li><a href="#">Item Folder 5a</a> <ul> <li><a href="#">Sub Item 5.1a</a></li> <li><a href="#">Item Folder 5.2a</a> <ul> <li><a href="#">Sub Item 5.2.1a</a></li> <li><a href="#">Sub Item 5.2.2a</a></li> <li><a href="#">Sub Item 5.2.3a</a></li> <li><a href="#">Sub Item 5.2.4a</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 6a</a></li> </ul> <!--HTML for Context Menu 2--> <ul id="contextmenu2" class="jqcontextmenu"> <li><a href="#">Item 1a</a></li> <li><a href="#">Item 2a</a></li> <li><a href="#">Item 1a</a></li> <li><a href="#">Item 2a</a></li> </ul>

More Set up information

To create a context menu and associate it with a specific element on your page, first, define the HTML markup for the menu anywhere on your page. The markup should be a regular UL list with a unique but arbitrary ID attribute plus a CSS class of "jqcontextmenu". For example:

<ul id="contextmenu2" class="jqcontextmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
</ul>

With the markup for the context menu defined, to associate it with an element on the page, inside the HEAD section of your page, call the method:

$(elementselector).addcontextmenu('contextmenuid')

Where "elementselector" is a valid jQuery element selector, and "contextmenuid" is obviously the ID of the context menu it should be associated with the matched elements. Lets say you want to associate the above context menu to all images on your page. The syntax would be:

jQuery(document).ready(function($){
 $('img').addcontextmenu('contextmenu2') //apply context menu to all images on the page
})

The extra surrounding code is to call the method only when the page has loaded. How about adding a context menu to the entire document?

jQuery(document).ready(function($){
 $(document).addcontextmenu('contextmenu2') //apply context menu to all images on the page
})

Or maybe all links on the page with CSS class "mylinks":

jQuery(document).ready(function($){
 $('a.mylinks').addcontextmenu('contextmenu2') //apply context menu to all images on the page
})

You get the idea!