Customized Context Menu for IE

This is a tip for how we can change the context menu of a browser with our own menu. The steps are simple and easy to design a context menu.
Just write the below code in to a CSS file and save as mymenu.css.

DIV.men
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: white 1px solid;
    LEFT: 10px;
    VISIBILITY: hidden;
    BORDER-LEFT: white 1px solid;
    WIDTH: 120px;
    BORDER-BOTTOM: 1px solid;
    POSITION: absolute;
    TOP: 10px;
    HEIGHT: 48px;
    BACKGROUND-COLOR: #D6D6D6;
}
TD.tdmenu
{
    CLEAR: left;
    FONT-SIZE: 8pt;
    CURSOR: hand;
    FONT-FAMILY: tahoma;
    HEIGHT: 16px;
}
TD.imgtd
{
    CLEAR: left;
    VERTICAL-ALIGN: middle;
    OVERFLOW: hidden;
    WIDTH: 16px;
    CURSOR: hand;
    HEIGHT: 16px;
    TEXT-ALIGN: center;
    SPACING: 0px;
    BACKGROUND-COLOR: #D6D6D6;
}
 
.icondimensions
{
    WIDTH: 12px;
    HEIGHT: 12px;
}
IMG.emp
{
    VISIBILITY: hidden;
}
IMG.arr
{
    WIDTH: 6px;
    HEIGHT: 9px;
}

and this code in a js file and saved as mymenu.js:

// Menu script

//default/required menu images:
var myi=new Image; myi.src="icons/arrow__r.gif";      //submenu arrow
var myiw=new Image; myiw.src="icons/arrow__rw.gif";   //same as white
var myie=new Image; myie.src="icons/arrow__e.gif";    //empty pic
var myis=new Image; myis.src="icons/spacer.gif";      //spacer
var myisb=new Image; myisb.src="icons/spacer__b.gif"; //enpty end pic left to spacer

 
var kto=2000;    //killTimeout [ms]
var mymenuwidth="160px"     //menu width                
var bg_color="#D6D6D6";        //colors...
var bg_color_hl="navy";        //syncronize with css file!!
var fg_color="black";
var fg_color_hl="white";
var spc="#SPACER#";    //spaser sign
var arr="#ARROW#";    //submenu sign

 
// caption/spacer,icon,gimmick/submenu
// MAIN MENU, DO NOT REMOVE, EDIT ONLY *********    
var m1=new Array;
m1[0]=new Array("");
m1[1]=new Array("JavaScript","icons/telkku.gif",
  "goto('http://www.google.co.in/search?hl=en&source=hp&q=javascript&meta=&gbv="+ 
  "2&oq=javascript&aq=f&aqi=g10&aql=&gs_sm=e&gs_upl=2211l4" + 
  "924l0l5441l10l10l0l4l4l1l329l1144l2-2.2l4l0')");
m1[2]=new Array(spc); //add divider
//denote sub menu (using "arr")
m1[3]=new Array("Freewarejava"+arr,"icons/pelle.gif",11);
m1[4]=new Array("Dynamic Drive","icons/pelle.gif",
                "goto('http://www.dynamicdrive.com')");
m1[5]=new Array("Coding Forums","icons/pelle.gif",
                "goto('http://www.codingforums.com')");
m1[6]=new Array("Technology Sites"+arr,"icons/pelle.gif",12);
//denote sub menu (using "arr")

 
// name submenus reasonable!
// m1## 1.level, m2## 2.level and so on...

// 1ST SUB MENU
var m11=new Array;    
m11[0]=new Array("");
m11[1]=new Array("Java Applets","icons/putki.gif",
       "goto('http://freewarejava.com/applets/')");
m11[2]=new Array("Tutorials"+arr,"icons/pelle.gif",21);
m11[3]=new Array("Java Sites","icons/telkku.gif",
       "goto('http://freewarejava.com/javasites/')");
m11[4]=new Array("Java Books","icons/telkku.gif",
       "goto('http://freewarejava.com/books/')");
m11[5]=new Array("JSP and Servlets","icons/telkku.gif",
       "goto('http://freewarejava.com/jsp/')");
 
// 1ST SUB MENU's SUB MENU
var m21=new Array;    
m21[0]=new Array("");
m21[1]=new Array("Java Tutorials","icons/telkku.gif",
       "goto('http://freewarejava.com/tutorials/')");
m21[2]=new Array("JavaScript Tutorials","icons/telkku.gif",
       "goto('Http://www.google.com')");
 
// 2ND SUB MENU
var m12=new Array;    
m12[0]=new Array("");
m12[1]=new Array("News.com","icons/telkku.gif",
                 "window.open('http://www.news.com')");
m12[2]=new Array("Wired News","icons/putki.gif",
                 "window.open('http://wired.com')");
m12[3]=new Array("SlashDot","icons/telkku.gif",
                 "window.open('http://slashdot.org')");
 
//ENTER MENU IDs of above. UPDATE IF ADD/REMOVE MENUS!
var mvect=new Array(1,11,12,21);            
 
// END OF EDITTING. variables ********
var th;             //menu height
var tw;             //menu width
var vas=0;          //on left flag
var llv=false;      //menu visible flag
var tid;            //timeout id
var ksm=0;          //known sub sub menu id

 
//************** FUNCTIONS
//******** base function to create menus

// error handler ***************
function stoperror(){
    return true;
}
window.onerror=stoperror;
//suppress potential JS errors. Comment line if you need to debug page.

function createMenus(){
    for(xyzzy=0;xyzzy<mvect.length;xyzzy++){
        document.write("<DIV id='teva"+mvect[xyzzy]+"' class='men'>");
        document.write("<TABLE WIDTH='100%' BORDER=0 " + 
                       "CELLSPACING=0 CELLPADDING=0>");
        initMenu(mvect[xyzzy]);
        document.write("</TABLE></DIV>");
    }
}
 
//******** initialization
function initMenu(t){
var obj=eval("teva"+t);    //container
var vect=eval("m"+t);    //menu
var ve1;                //caption
var ve2;                //picture
var ve3;                //trick/no of submenu 
var spacers=0;            //spacer counter
    obj.style.height=(vect.length-1)*16+"px";
    obj.style.width=mymenuwidth;
    if(t==1){
        th=obj.style.height.substr(0,obj.style.height.length-2);
        tw=obj.style.width.substr(0,obj.style.width.length-2);
    }
    for(i=1;i<vect.length;i++){
        ve1=eval("vect["+i+"][0]");
        document.write("<TR>");
        if(ve1==spc){
            spacers++;
            document.write("<TD colspan=3 style='height:8px;'>"+
                "<img src='"+myisb.src+"' style='width:3px;height:2px;'>"+
                "<img src='"+myis.src+"' style='width:95%;height:2px;'></TD>");
        }else{ 
            ve2=eval("vect["+i+"][1]");
            ve3=eval("vect["+i+"][2]");
            if(ve1.match(arr)){
                var oy=16*(i-1)-spacers*8;
                document.write("<TD class='imgtd' style='border:1px solid "+bg_color+";' "+
                    "id='m_"+t+"_"+i+"a'  önmouseover='act_td("+t+","+i+");
                showSubMenu("+t+","+ve3+","+oy+");' "+
                    " önmouseout='nonact_td("+t+","+i+");'>"+
                    "<img id='m_"+t+"_"+i+"ap' src='"+ve2+
                    "' class='icondimensions'></TD>");
                document.write("<TD  önmouseover='act_td("+t+","+i+");
                showSubMenu("+t+","+ve3+","+oy+");' "+
                    " önmouseout='nonact_td("+t+","+i+");' class='tdmenu' "+
                    "id='m_"+t+"_"+i+"'> "+ve1.substr(0,ve1.length-7)+"</TD>");
                document.write("<td class='imgtd' id='m_"+t+"_"+i+"b' "+
                    " önmouseover='act_td("+t+","+i+");
                showSubMenu("+t+","+ve3+","+oy+");' "+
                    " önmouseout='nonact_td("+t+","+i+");'>"+
                    "<img class='arr' id='m_"+t+"_"+i+"bp' src='"+myi.src+"'></td>");
            }else{
                document.write("<TD class='imgtd' style='border:1px solid "+bg_color+";' "+
                    "id='m_"+t+"_"+i+"a' onmouseover='act_td("+t+","+i+");' "+
                    " önmouseout='nonact_td("+t+","+i+");' "+
                    " önclick='eval(m"+t+"["+i+"][2]);'>"+
                    "<img id='m_"+t+"_"+i+"ap' src='"+ve2+
                    "' class='icondimensions'></TD>");
                document.write("<TD onmouseover='act_td("+t+","+i+");'    "+
                    " önmouseout='nonact_td("+t+","+i+");'  önclick='eval(m"+t+"["+i+"][2]);' "+
                    "class='tdmenu' id='m_"+t+"_"+i+"'> "+ve1+"</TD>");
                document.write(    "<td class='imgtd' id='m_"+t+"_"+i+"b' "+
                    "onmouseover='act_td("+t+","+i+");' "+
                    " önmouseout='nonact_td("+t+","+i+");' "+
                    " önclick='eval(m"+t+"["+i+"][2]);'>"+
                    "<img class='emp' id='m_"+t+"_"+i+"bp' " + 
                    "src='' width='12px' height='12px'></td>");
            }
        }
        document.write("</TR>");
    }
    if(t==1){
        obj.style.height=(vect.length-1)*16-spacers*8+"px";
        th=obj.style.height.substr(0,obj.style.height.length-2);
    }
}
// on hover **********
function act_td(t,i){
    window.clearTimeout(tid);
    var obj=eval("m_"+t+"_"+i);
    if(t==1) 
    hideSubMenu();
    else
    hideKnownSubMenu(t);
    obj.style.backgroundColor=bg_color_hl;
    obj.style.color=fg_color_hl;
    act1_td(eval(obj.id+"a")); //send cell id

    act2_td(eval(obj.id+"b"));
}
// on mouse out *********
function nonact_td(t,i){
    var obj=eval("m_"+t+"_"+i);
    obj.style.backgroundColor=bg_color;
    obj.style.color=fg_color;
    nonact1_td(eval(obj.id+"a"));
    nonact2_td(eval(obj.id+"b"));
    tid=setTimeout('showMenu("mousedown")',kto);
}
//******** left=icon cell hover...
function act1_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
    if(pix.src!=myie.src)
        cel.style.border='1px outset';
    else{
        cel.style.border="1px solid "+bg_color_hl;
        cel.style.backgroundColor=bg_color_hl;
    }
}
// icon cell on mouse out *********
function nonact1_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
    if(pix.src!=myie.src)
        cel.style.border="1px solid "+bg_color;
    else{
        cel.style.border="1px solid "+bg_color;
        cel.style.backgroundColor=bg_color;
    }
}
//******** right cell for submenu arrow on hover
function act2_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
    cel.style.backgroundColor=bg_color_hl;
    if(cel.className!="emp") pix.src=myiw.src;
}
//********** same onmouseout........
function nonact2_td(t){
    var cel=eval(t);
    var pix=eval(t.id+"p");
    cel.style.backgroundColor=bg_color;
    cel.style.color=fg_color;
    if(cel.className!="emp") pix.src=myi.src;
}
// needs explanations?
function showMenu(e){
    if(llv==true)
        hideMenu();
    else{
        clearTimeout(tid);
        var ah=document.body.clientHeight-th;
        var aw=document.body.clientWidth-tw;
 
        if(e.clientY < ah) teva1.style.top=e.clientY;
        else teva1.style.top=e.clientY-th;
 
        if(e.clientX < aw) {teva1.style.left=e.clientX;vas=0;}
        else {teva1.style.left=e.clientX-tw;vas=1;}
        
        teva1.style.visibility='visible';
        llv=true;
        tid=window.setTimeout("hideMenu()",kto);
    }
}
// ...........
function showSubMenu(c,t,y){
    clearTimeout(tid);
    var tobj=eval("teva"+c);
    var obj=eval("teva"+t);
    var ox=tobj.style.left.substr(0,tobj.style.left.length-2); 
    var oy=tobj.style.top.substr(0,tobj.style.top.length-2); 
    var oh=obj.style.height.substr(0,obj.style.height.length-2);
    var ow=obj.style.width.substr(0,obj.style.width.length-2);
    if(vas==0){
        if(Math.round(ox) > Math.round(document.body.clientWidth)-Math.round(ow)*2-10)
            obj.style.left=Math.round(ox)-Math.round(ow)+2;
        else
            obj.style.left=Math.round(ox)+Math.round(ow)-5;
    }else
        obj.style.left=Math.round(ox)-Math.round(ow)+2;
    if(Math.round(oy)+Math.round(y) < Math.round(document.body.clientHeight)-Math.round(oh))
        obj.style.top=Math.round(oy)+Math.round(y);
    else
        obj.style.top=Math.round(oy)+Math.round(y)-Math.round(oh);
    obj.style.visibility='visible';
    ksm=t;
}
//...............
function hideMenu(){
    clearTimeout(tid);
    teva1.style.visibility='hidden';
    hideSubMenu();
    llv=false;
}
//.................
function hideSubMenu(){
var obj;
    for(j=1;j<mvect.length;j++){
        obj=eval("teva"+mvect[j]);
        obj.style.visibility='hidden';
    }
}
//.................
function hideKnownSubMenu(t){
    if(ksm>0 && ksm!=t){
        var obj;
        for(j=1;j<mvect.length;j++){
            if(mvect[j]>t){
                obj=eval("teva"+mvect[j]);
                obj.style.visibility='hidden';
            }
        }
        ksm=0;
    }
}
 
function goto(url){
window.location=url
}

add the given code to an HTML file and save as mymenu.html.

<HTML>
<HEAD>
<TITLE>N-level Context Menu script</TITLE>
<LINK HREF="mymenu.css" type="text/css" REL="stylesheet">
<SCRIPT tyle="text/javascript">
var iecheck=document.all&&document.getElementById
if (iecheck){
document.write('<script type="text/javascript" src="mymenu.js"><\/script>')
}
</SCRIPT>
 
<SCRIPT tyle="text/javascript">
if (document.getElementById && !document.all){
  document.write('<script type="text/javascript" ' + 
    'src="mymenu.js"><\/script>')
}
</SCRIPT>
 
</HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript">
 
if (iecheck){
  createMenus();
  document.oncontextmenu=function()
  {
    showMenu(event);
    return false;
  }
  document.onmouseup=function()
  {
    hideMenu(event);
    return false;
  }
}
</SCRIPT>
 
<SCRIPT LANGUAGE="javascript">
 
if (document.getElementById && !document.all){
createMenus();
document.oncontextmenu=function()
{
  showMenu(event);
  return false;
}
document.onmouseup=function()
{
  hideMenu(event);
  return false;
}
}
</SCRIPT>
</BODY>
</HTML>

All of the files should be inside the same folder and can add some of the image files listed in the code, as these are not provided due to security restrictions here.
This code shows a context menu in IE works perfectly.