Context menu

Hi there, is there anybody that can post an small example showing a working context menu?

Thanks to everyone.
Hugo Abreu
September 13,
I have been plaaying around with a context menu and this is my first cut. Feel free to use this code... sorry I had to upload the images to friends site so you will have to copy them from there...

.GridCM_ContextMenu, .GridCM_ContextMenu *
font-size: 11px;
font-family: 'Microsoft Sans Serif' , Tahoma, Arial, Verdana, Sans-Serif;

position: absolute;
visibility: hidden;
border: 1px solid #8f8f73;
padding: 2px;
background-color: #f7f8fd;
z-index: 1000;

.GridCM_Option, .GridCM_Over, .GridCM_Disabled
padding: 0px 3px;
height: 18px;
cursor: default;

.GridCM_Option, .GridCM_Over
cursor: hand;

.GridCM_Option .GridCM_Icon, .GridCM_Disabled .GridCM_Icon, .GridCM_Separator .GridCM_Icon
background-color: #d6dff7;

.GridCM_Option .GridCM_Icon IMG
filter: alpha(opacity=70);
-moz-opacity: 0.70;

background-color: #ffffff;

.GridCM_Disabled .GridCM_Icon IMG, .GridCM_Disabled .GridCM_Label
filter: gray() alpha(opacity=30);
-moz-opacity: 0.30;

.GridCM_Option .GridCM_Label, .GridCM_Over .GridCM_Label
padding: 1px 10px 1px 3px;

color: #ffffff;
background-color: #7096FA;

.GridCM_Over .GridCM_Icon
background-color: #466ca6;

.GridCM_Separator TD
height: 3px;

.GridCM_Separator .GridCM_Label DIV
border-top: #b9b99d 1px solid;
margin-left: 2px;
margin-right: 3px;

function GridCM_Over(o) {if (o.className!='GridCM_Disabled')o.className='GridCM_Over';}
function GridCM_Out(o) {if (o.className!='GridCM_Disabled')o.className='GridCM_Option';}
function GridCM_Click(o){if (o.className!='GridCM_Disabled'){GridCM_Hide();GridCM_Execute(o);}return false;}
function GridCM_Show() {
if (document.all.contextMenu) {
document.all.contextMenu.style.pixelLeft = event.clientX;
document.all.contextMenu.style.pixelTop = event.clientY;
document.all.contextMenu.style.visibility = 'visible';
return false;
function GridCM_Hide() {
if (document.all.contextMenu)
document.all.contextMenu.style.visibility = 'hidden';
return true;
function GridCM_Execute(o){
if (o==3) alert('Search');
if (o==4) alert('Filter');
document.oncontextmenu = GridCM_Show;
//document.onmousedown = GridCM_Hide;

<div id="contextMenu" class="GridCM_ContextMenu">
<table cellSpacing="0" cellPadding="0" border="0">
<tr class="GridCM_Disabled">
<td class="GridCM_Icon"><img height="20" alt="" src="http://hijazi.com.au/admin/media/hide.gif" width="21"></td>
<td class="GridCM_Label">Hide Column</td>
<tr class="GridCM_Disabled">
<td class="GridCM_Icon"><img height="20" alt="" src="http://hijazi.com.au/admin/media/customise.gif" width="21"></td>
<td class="GridCM_Label">Customise Grid</td>
<tr class="GridCM_Separator">
<td class="GridCM_Icon"></td>
<td class="GridCM_Label"><div></div></td>
<tr class="GridCM_Option" onclick="GridCM_Click(3);" onmouseover="GridCM_Over(this);" onmouseout="GridCM_Out(this);">
<td class="GridCM_Icon"><img height="20" alt="" src="http://hijazi.com.au/admin/media/search.gif" width="21"></td>
<td class="GridCM_Label">Search Column</td>
<tr class="GridCM_Option" onclick="GridCM_Click(4);" onmouseover="GridCM_Over(this);" onmouseout="GridCM_Out(this);">
<td class="GridCM_Icon"><img height="20" alt="" src="http://hijazi.com.au/admin/media/filter.gif" width="21"></td>
<td class="GridCM_Label">Filter Grid</td>

Page Content<br>
Right Click in the page...<br>

Big AL from Sydney
September 14,
Thank you for your great example but, I'm having trouble in geting it to work with using the context menu associating with a row.

Any ideas?

Hugo Abreu
September 15,

This topic is archived.

See also:

Back to support forum