Click here to Skip to main content
15,117,549 members
Articles / Web Development / XHTML
Posted 9 Jun 2008


120 bookmarked

JavaScript Context Menu Control

Rate me:
Please Sign up or sign in to vote.
4.95/5 (45 votes)
23 Jun 2008CPOL3 min read
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,.


Comments and Discussions

Questionthank u for this contextMenu article Pin
SANDIP MERANI7-Dec-13 12:09
MemberSANDIP MERANI7-Dec-13 12:09 
Questiontext of a linkbutton on which rightclick is made Pin
anjalisushma28-Mar-13 0:28
Memberanjalisushma28-Mar-13 0:28 
QuestionContext Menu Pin
anjalisushma15-Mar-13 4:15
Memberanjalisushma15-Mar-13 4:15 
QuestionThank U, one question here Pin
bhaskarsgb5-Nov-12 20:37
Memberbhaskarsgb5-Nov-12 20:37 
GeneralMy vote of 5 Pin
Prasyee3-Oct-12 0:49
MemberPrasyee3-Oct-12 0:49 
Questionnot working..please HELP!! Pin
tripti69017-Sep-12 2:54
Membertripti69017-Sep-12 2:54 
Questioncomment Pin
shilpi cgi31-Jul-12 22:26
Membershilpi cgi31-Jul-12 22:26 
QuestionHAi Pin
lij thomas23-Nov-11 20:22
Memberlij thomas23-Nov-11 20:22 
BugNot working on IE8 / Compatibility View Pin
_skidrow_vn_22-Aug-11 7:59
Member_skidrow_vn_22-Aug-11 7:59 
GeneralRe: Not working on IE8 / Compatibility View Pin
_skidrow_vn_25-Aug-11 21:42
Member_skidrow_vn_25-Aug-11 21:42 
QuestionMy vote of 6 Pin
_skidrow_vn_21-Aug-11 23:10
Member_skidrow_vn_21-Aug-11 23:10 
AnswerRe: My vote of 6 Pin
Samir NIGAM21-Aug-11 23:15
MemberSamir NIGAM21-Aug-11 23:15 
QuestionHow to add Multlevel Pin
keyur soni25-Jul-11 22:59
Memberkeyur soni25-Jul-11 22:59 
GeneralMy vote of 5 Pin
jasv25-May-11 7:15
Memberjasv25-May-11 7:15 
GeneralRe: My vote of 5 Pin
Samir NIGAM21-Aug-11 23:16
MemberSamir NIGAM21-Aug-11 23:16 
QuestionDisplay many context menu Pin
Member 29335002-May-11 0:38
MemberMember 29335002-May-11 0:38 
QuestionNot able to get Exact Sender when context Menu is opened? Pin
Shailendra_atrey15-Nov-10 0:33
MemberShailendra_atrey15-Nov-10 0:33 
GeneralEnable a Disabled Menu [modified] Pin
Satish Panchware6-Jan-10 3:53
MemberSatish Panchware6-Jan-10 3:53 
GeneralFIREFOX functionality and POPUPMENU location FIX Pin
cjsmithMRC14-Jul-09 16:40
MembercjsmithMRC14-Jul-09 16:40 
GeneralRe: FIREFOX functionality and POPUPMENU location FIX Pin
Samir NIGAM14-Jul-09 21:43
MemberSamir NIGAM14-Jul-09 21:43 
GeneralGreat Pin
Rajeesh MP8-Apr-09 3:20
MemberRajeesh MP8-Apr-09 3:20 
GeneralRe: Great Pin
Samir NIGAM14-Jul-09 21:43
MemberSamir NIGAM14-Jul-09 21:43 
QuestionWhen Sub Menu support ??? Pin
JLKEngine0083-Apr-09 18:10
MemberJLKEngine0083-Apr-09 18:10 
GeneralUrgent!! Urgent!! Urgent!! Pin
mohd rabi11-Feb-09 16:27
Membermohd rabi11-Feb-09 16:27 
GeneralRe: Urgent!! Urgent!! Urgent!! Pin
nareshu9-Feb-10 22:01
Membernareshu9-Feb-10 22:01 

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.