Download context menu

Demo

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

The context menu is based on an unordered list, so you use only HTML to create your menu. Example:
<ul id="contextMenu">
  <li><a href="http://www.dhtmlgoodies.com">
<img src="images/button.gif">Home</a></li>
  <li><a href="#" onclick="jsFunction();return false">
View HTML</a></li>
  <li><a href="#">Menu item 3</a></li>
  <li><a href="#">Menu item 4</a></li>
</ul>

Remember to give your <UL> the id "contextMenu"

You initialize the menu by calling the javascript function "initContextMenu". Example:
<script type="text/javascript"> initContextMenu(); </script>
Put this code below your <UL><LI> list

The layout of the menu is specified in the CSS. Border colors, rollover colors and which gradient image to used is all defined there.

Download images

There is only one image needed for this script. That is the background gradient. To download it, right click on it below and select "Save target As". Put it in a sub folder called images.

You can also create your own gradient if you like. The size of our gradient is 24 x 10 pixels. There's a nice gradient maker available at dynamicdrive.com.

You can also download the small icon used in this example:

Comments

von
Can this be varied so that the menu only shows when you right click on (for instance) a hyperlink, otherwise the normal browser context menu is shown?
von at 04:36PM, 2012/06/12.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Unable to save captcha-image.