Click here to Skip to main content
13,899,227 members
Click here to Skip to main content
Add your own
alternative version


119 bookmarked
Posted 9 Jun 2008
Licenced CPOL

JavaScript Context Menu Control

, 23 Jun 2008
Rate this:
Please Sign up or sign in to vote.
Cross-browser JavaScript context menu control for web applications.



I’m going to introduce here a JavaScript Context Menu control. It is a cross-browser JavaScript class that runs on various browsers except Opera as Opera doesn’t support the oncontextmenu event.


Around one and a half years ago, I had created a context menu to display on a GridView control to perform some actions in a project. That project was IE based. So, the context menu was IE specific, and not cross-browser compatible. Also, it was a mixture of JavaScript and HTML: I had created its layout using the HTML table and div elements and displayed it using JavaScript. I wanted to develop it as a cross-browser JavaScript class. So, I started its development, and after spending some time on the Internet and books, I succeeded.


The constructor of the context menu class takes an argument of the type Object Literal. The definition of the Object Literal argument for this control is given below:

var Arguments = {
   Base: _Base, // Base reference where Context Menu to be displayed.
   Width: _Width, // Width of the Context Menu in integer.
   FontColor: _FontColor, // Font Color of each Context Menu item.
   HoverFontColor: _HoverFontColor, // Hover Font Color of each Context Menu item.
   HoverBackgroundColor: _HoverBackgroundColor, // Hover Background Color
                                                // of each Context Menu item.
   HoverBorderColor: _HoverBorderColor, // Hover Border Color of each Context Menu item.
   OnClickEventListener: _OnClickEventListener // Reference of the click event handler.


var Arguments = {
   Base: document.getElementById('div'),
   Width: 200,
   FontColor: black,
   HoverFontColor: white,
   HoverBackgroundColor: blue,
   HoverBorderColor: orange,
   OnClickEventListener: ClickEventHandler  

You can assign each property of the Object Literal argument to null. In this case, each property will acquire its default value as:

var Arguments = {
   Base: null, // Default Value: document.documentElement.
   Width: null, // Default Value: 200.
   FontColor: null, // Default Value: ‘black’.
   HoverFontColor: null, // Default Value: ‘white’.
   HoverBackgroundColor: null, // Default Value: '#2257D5'.
   HoverBorderColor: null, // Default Value: ‘orange’.
   OnClickEventListener: null //Default anonymous method.


The context menu control has the following public methods:

  • AddItem(ImagePath, ItemText, IsDisabled, CommandName) - Used to add a context menu item.

    It takes four arguments:

    • ImagePath: Path of the item image.
    • ItemText: The item text.
    • IsDisabled: Indicates whether the item is to be disabled or not.
    • CommandName: The command name of the item.
  • AddSeparatorItem(): Used to add a separator item.
  • Display(e): Used to display the context menu.
  • Hide(): Used to hide the context menu.
  • Dispose(): Used to destroy the context menu.
  • GetTotalItems(): Used to get the count of total items including the separator items.


The context menu control has only a public property. It only displays the current version of the context menu control. It does nothing else.

  • Version: Displays the current version.


The context menu control has only one event – The Click event that fires when items other than the separator items are clicked.

  • Click: Fires when an item is clicked.

The local anonymous method that responds to the Click event (i.e., the event handler) has the following signature:

var EventHandlerName = function(Sender, EventArgs)

where Sender is the reference of the element that raises the click event (i.e., the tr element) and EventArgs is the Object Literal that contains the necessary information regarding Click event. The EventArgs Object Literal has the following definition:

var EventArgs = {
   CommandName: _CommandName, // Base Command name of the Item.
   Text: _Text, // Item Text.
   IsDisabled: _IsDisabled, // Indicate whether Item to be disabled or not.
   ImageUrl: _ImageUrl // Path of the Item image. 

Note that the Click event handler is a C# style event handler.

Using the Control

Add a reference to the ContextMenu.js file in your web page, as:

<script type="text/javascript" src="JS/ContextMenu.js"></script>

Create a div element on the web page, as:

<div id="div" style="width: 925px; height: 300px; background-color: silver;">

Now, create a script tag in the head section of the web page and add the following code in the window.onload event:

<script type="text/javascript">
    var oCustomContextMenu = null;
    var oBase = null;
    window.onload = function()
        oBase = document.getElementById('div');
        var Arguments = {
            Base: oBase,
            Width: 200,
            FontColor: null,
            HoverFontColor: null,
            HoverBackgroundColor: null,
            HoverBorderColor: null,
            ClickEventListener: OnClick
        oCustomContextMenu = new CustomContextMenu(Arguments); 
        oCustomContextMenu.AddItem('Images/ei0019-48.gif', 'Add', false, 'Add');
        oCustomContextMenu.AddItem('Images/save.png', 'Save', true, 'Save');
        oCustomContextMenu.AddItem('Images/ei0020-48.gif', 'Update', false, 'Update');
        oCustomContextMenu.AddItem(null, 'Cancel', false, 'Cancel');

First, get the reference of the Base object and create an Arguments Object Literal with the necessary properties. After that, instantiate a context menu object using the new keyword and add the context menu items. Don’t forget the Click event wire up in the Arguments Object Literal:

ClickEventListener: OnClick 

Now, create a Click event handler as a local anonymous method:

var OnClick = function(Sender, EventArgs)


var OnClick = function(Sender, EventArgs)
        case 'Add':
            alert('Text: ' + EventArgs.Text);
            alert('IsDisabled: ' + EventArgs.IsDisabled);
            alert('ImageUrl: ' + EventArgs.ImageUrl);
        case 'Save':
            alert('Text: ' + EventArgs.Text);
            alert('IsDisabled: ' + EventArgs.IsDisabled);
            alert('ImageUrl: ' + EventArgs.ImageUrl);
        case 'Update':
            alert('Text: ' + EventArgs.Text);
            alert('IsDisabled: ' + EventArgs.IsDisabled);
            alert('ImageUrl: ' + EventArgs.ImageUrl);
        case 'Cancel':
           alert('Text: ' + EventArgs.Text);
           alert('IsDisabled: ' + EventArgs.IsDisabled);
           alert('ImageUrl: ' + EventArgs.ImageUrl);

This method will get called when you click on any item of the context menu. Don’t forget to invoke the Hide method at last in the event handler.

Now, attach the oncontextmenu event on the div that has been created earlier:

<  oncontextmenu="javascript:return oCustomContextMenu.Display(event);"  >

Invoke the Dispose method in the window.onunload event in order to destroy the context menu object:

window.onunload = function(){ oCustomContextMenu.Dispose(); }


So this is my approach. I was working for a long time to create C# like event handlers for JavaScript classes and finally, I’ve done it. Please let me know of any bugs and suggestions to improve this context menu control.

Browser Compatibility

I have tested this control on various browsers and it works fine except on Opera as Opera doesn’t support the oncontextmenu event. If any one has information regarding simulating the oncontextmenu event on Opera, kindly let me know. The following are the supported browsers:



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.


You may also be interested in...


Comments and Discussions

Questionwhen support Sub Menu ??????? Pin
JLKEngine00817-Sep-08 18:31
memberJLKEngine00817-Sep-08 18:31 
Questionadd onclick to menu items? Pin
ian_smith3316-Sep-08 23:00
memberian_smith3316-Sep-08 23:00 
Generalerror Pin
aj_1429-Aug-08 11:03
memberaj_1429-Aug-08 11:03 
GeneralRe: error Pin
Samir NIGAM29-Aug-08 23:12
memberSamir NIGAM29-Aug-08 23:12 
QuestionWhen Sub Menu support in the next update??? Pin
JLKEngine00828-Aug-08 22:34
memberJLKEngine00828-Aug-08 22:34 
QuestionEXCELLENT ARTICLE, hav a doubt, could u pl help...... Pin
itc12323-Aug-08 19:11
memberitc12323-Aug-08 19:11 
AnswerRe: EXCELLENT ARTICLE, hav a doubt, could u pl help...... Pin
Samir NIGAM24-Aug-08 19:19
memberSamir NIGAM24-Aug-08 19:19 
GeneralDoesn't work in FF (unless you alter the about:config settings) Pin
atorreano16-Jul-08 12:25
memberatorreano16-Jul-08 12:25 
GeneralExcellent work Pin
Dhanasekaran R4-Jul-08 19:01
memberDhanasekaran R4-Jul-08 19:01 
GeneralRe: Excellent work Pin
Samir NIGAM4-Jul-08 20:16
memberSamir NIGAM4-Jul-08 20:16 
QuestionSub Menu Support? Pin
Dan Avni30-Jun-08 20:38
memberDan Avni30-Jun-08 20:38 
AnswerRe: Sub Menu Support? Pin
Samir NIGAM4-Jul-08 20:14
memberSamir NIGAM4-Jul-08 20:14 
Questionnice work! Pin
wuxsh29-Jun-08 22:40
memberwuxsh29-Jun-08 22:40 
AnswerRe: nice work! Pin
Samir NIGAM30-Jun-08 18:56
memberSamir NIGAM30-Jun-08 18:56 
GeneralNice article and good work Pin
Member 381396218-Jun-08 5:49
memberMember 381396218-Jun-08 5:49 
GeneralRe: Nice article and good work Pin
Samir NIGAM18-Jun-08 18:02
memberSamir NIGAM18-Jun-08 18:02 
Generalhandy stuff Pin
Rajib Ahmed17-Jun-08 5:23
memberRajib Ahmed17-Jun-08 5:23 
GeneralRe: handy stuff Pin
Samir NIGAM18-Jun-08 18:04
memberSamir NIGAM18-Jun-08 18:04 
Generalhi Pin
crazsmith17-Jun-08 5:12
membercrazsmith17-Jun-08 5:12 
GeneralRe: hi Pin
Samir NIGAM18-Jun-08 18:05
memberSamir NIGAM18-Jun-08 18:05 
GeneralGreat tool - minor typo. Pin
dpminusa17-Jun-08 2:22
memberdpminusa17-Jun-08 2:22 
GeneralRe: Great tool - minor typo. Pin
Samir NIGAM18-Jun-08 18:06
memberSamir NIGAM18-Jun-08 18:06 
GeneralSlowly expanding of panel Pin
S.Aijaz16-Jun-08 17:57
memberS.Aijaz16-Jun-08 17:57 
GeneralXcelent Pin
Abhijit Jana12-Jun-08 5:36
mentorAbhijit Jana12-Jun-08 5:36 
GeneralRe: Xcelent Pin
Samir NIGAM12-Jun-08 18:14
memberSamir NIGAM12-Jun-08 18:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190306.1 | Last Updated 24 Jun 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid