contextMenu example

Click on the link below to create a menu and then either use the right mouse button or double click the left mouse button to display the menu.

For the menu to work all a web developer has to do is create the following CSS styles which are applied when the menu hides and shows:

 .hide {
  display: none;
 }

 .show {
  display: block;
  position: absolute;
 }

With HTML for the menu with the hide stlye class and a unique ID, such as:

 <div class="hide" id="cm">
  <a href="http://www.webotech.co.uk/contextmenu/">Project page</a>
  <a href="http://www.webotech.co.uk/">webotech.co.uk</a>
 </div>

To create a menu called cm use the following Javascript. The input paramenters are the hide style, the show style, the menu HTML ID, the display time in milliseconds, the width in pixels and the height in pixels.:

 <script type="text/javascript">
  <!--
  var cm = new contextMenu('hide','show','cm',1000,150,180);
  //-->
 </script>

The following actions can be applied to the menu, here is is show as an onclick mouse event. The reset action allows you to redefine the menu:

 ... onclick="cm.hide()" ...
 ... onclick="cm.reset('hide','show','cm',800,100,150,'ondblclick')" ...
 ... onclick="cm.destroy()" ...

Here is additional information on the input parameters: