网页中制作右键菜单

 需要在网页上做右键菜单，这不得不借助javascript。看了一下，有以下几个关键点：

1：菜单需要用div分层来定义。
2：接管浏览器的右键菜单方法：  document.oncontextmenu = showMenu;
3：在必要时弹出菜单，这可以通过判定当前element的属性，在输出html时，需要对特定单位设定特定的Style。
比如；<TD class="menuDD">右键菜单2</TD>  menuDD就是特定的style。
     判断的方法是：
     if (event.srcElement.className == "menuDD") 
     处理是：如果是指定Style，那就显示我们的div菜单，否则，返回true,交给系统处理。
4：显示菜单前，需要为菜单计算显示位置：
    这个主要通过 document.body 和 event的属性，以及菜单本身的预定义偏移值来确定。很简单，不多说。
5：鼠标在菜单上移动的效果处理。
   这主要是要体现菜单的通常效果。也就是移到某Item，移出某Item的菜单显示效果。
   定义相应的处理函数：onMouseover="highlightMenu()" onMouseout="lowlightMenu()"
   相应函数里，无非是改变特定菜单项的显示效果。
6：执行菜单的功能。
   在div中定义执行功能的方法：onClick="onMenuGoto();"  onMenuGoto可以根据div中各单元提供的属性执行功能。
7：隐藏菜单的功能。
   当点击其它地方时，应该隐藏菜单。
   document.body.onclick = hideMenu; 
   隐藏菜单无非就是将 visibility 置 "hidden"; 

  下面是示例代码：

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >  
< HTML >
   < HEAD >  
   < TITLE > 右键菜单 </ TITLE >  
   < style >   

.skin0  ... {  
position:absolute;  
padding-top:2px;  
text-align:left;  
width:200px; 
border:2px solid black;  
background-color:menu; 
font-family:"宋体";  
line-height:20px;  
cursor:default;  
visibility:hidden; 
border:2 outset buttonhighlight;  
}   

.menuitems  ... {  
padding:2px 2px 2px 1px;  
}  

.menuDD ... { 
background:pink; 
}  

</ style >  
</ HEAD >  

< SCRIPT LANGUAGE = " JavaScript " >  
<!--  
function  showMenu() ... { 
  if (event.srcElement.className != "menuDD") ...{  
     return true; 
} 
var rightedge = document.body.clientWidth-event.clientX;  
var bottomedge = document.body.clientHeight-event.clientY;  
if (rightedge <pm.offsetWidth)...{ 
pm.style.left = document.body.scrollLeft + event.clientX - pm.offsetWidth;  
}else...{ 
pm.style.left = document.body.scrollLeft + event.clientX;  
} 
if (bottomedge <pm.offsetHeight)...{ 
pm.style.top = document.body.scrollTop + event.clientY - pm.offsetHeight;  
}else...{ 
pm.style.top = document.body.scrollTop + event.clientY;  
} 
pm.style.visibility = "visible";  
return false;  
}  

function  hideMenu() ... { 
  pm.style.visibility="hidden"; 
}  

function  highlightMenu()  ... {  
if (event.srcElement.className == "menuitems") ...{  
  event.srcElement.style.backgroundColor = "highlight";  
  event.srcElement.style.color = "white";  
  }  
}  

function  lowlightMenu()  ... {  
if (event.srcElement.className == "menuitems") ...{  
event.srcElement.style.backgroundColor = "";  
event.srcElement.style.color = "black";  
window.status = ""; 
} 
}  

function  onMenuGoto() ... { 
  if (event.srcElement.className == "menuitems" &event.srcElement.url!=null) ...{ 
  if (event.srcElement.getAttribute("target") != null)...{ 
  window.open(event.srcElement.url, event.srcElement.getAttribute("target"));  
  }
   else...{ 
    window.location = event.srcElement.url; 
   } 
  }  
}  

// --> 
</ SCRIPT >  
< BODY >  
< div id = " pm "  class = " skin0 "  onMouseover = " highlightMenu() "  onMouseout = " lowlightMenu() "  
onClick = " onMenuGoto(); " >  
< div class = " menuitems "  target = " _bank "  url = " http://www.google.com " > Google </ div >  
< div class = " menuitems "  target = " _bank "  url = " http://www.baidu.com.cn " > baidu </ div >  
< div class = " menuitems "  onclick = " alert(this.innerHTML); " > Hi, I ' m javascript.</div> 
</div>

右键菜单测试 
<p class="menuDD">右键菜单</p> 

<TABLE border="1" align="center" cellpadding=0 cellspacing=0 bordercolordark="white" bordercolor="blue"> 
<TR> 
<TD class="menuDD">右键菜单1</TD> 
<TD>eeeeeeeee</TD> 
<TD>eeeeeeeeeeeeee</TD> 
<TD>eeeeeeeeeeeee</TD> 
</TR> 
<TR> 
<TD>ew</TD> 
<TD>wwwwwwwe</TD> 
<TD>333333</TD> 
<TD>3333333333333</TD> 
</TR> 
<TR> 
<TD>eeeeeeeeee</TD> 
<TD>wew</TD> 
<TD>ewewe</TD> 
<TD class="menuDD">右键菜单2</TD> 
</TR> 
</TABLE> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
if (document.all) {  
  document.oncontextmenu = showMenu; 
  document.body.onclick = hideMenu;  
}  
//--> 
</SCRIPT> 
</BODY> 
</HTML>