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...
<HTML>
<HEAD>
<STYLE>
.GridCM_ContextMenu, .GridCM_ContextMenu *
{
font-size: 11px;
font-family: 'Microsoft Sans Serif' , Tahoma, Arial, Verdana, Sans-Serif;
}
.GridCM_ContextMenu
{
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;
}
.GridCM_Disabled
{
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;
}
.GridCM_Over
{
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;
}
</STYLE>
<SCRIPT>
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;
</SCRIPT>
</HEAD>
<BODY>
<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>
<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>
<tr class="GridCM_Separator">
<td class="GridCM_Icon"></td>
<td class="GridCM_Label"><div></div></td>
</tr>
<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>
<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>
</tr>
</table>
</div>
<P>
Page Content<br>
Right Click in the page...<br>
</P>
</BODY>
</HTML>
