如何在html中显示自定义右键菜单？

<HTML  xmlns:t ="urn:schemas-microsoft-com:time"
xmlns:v = "urn:schemas-microsoft-com:vml"  >  
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
v\:* {  BEHAVIOR: url(#DEFAULT#VML)}
BODY         {font-family:arial;font-size:80%}
.time        {behavior: url(#default#time2)}
.box         {position:absolute;top:100;left:100;width:150px;height:22px;
             padding:5px;padding-left:15px;display:none;cursor:hand;font-family:arial;}
</STYLE><SCRIPT>
// Function is used to animate the menu box movement.
function moveBox(){
    var mouseLeft = null;
    var mouseTop = null;
    // Make the menu boxes visible
    oBox.style.display='block';
    oBox2.style.display='block';
    oBox3.style.display='block';
    // Retrieve x and y coordinates of the mouse click
    mouseLeft=event.clientX;
    mouseTop=event.clientY;
////////////////////////////////////////////////////////////////////////////    
    // Two t:ANIMATE elements are used for each menu box to control the 
    // movement of each box. One t:ANIMATE element controls the x-coordinate
    // animation and the other controls the y-coordinate animation. The "to" 
    // properties of the t:ANIMATE elements are set to a value relative to 
    // the respective x and y coordinates of the mouse click. This ensures
    // that the menu boxes animate to the correct location. To begin the 
    // animation, the t:ANIMATE elements are started on the time line using
    // the "beginElement()" method.
///////////////////////////////////////////////////////////////////////////
    // Code for top menu box animation.
    leftMove.to=mouseLeft;
    topMove.to=mouseTop;
    leftMove.beginElement();
    topMove.beginElement();
    // Code for middle menu box animation.
    leftMove2.to=mouseLeft;
    topMove2.to=mouseTop + 29; // notice that y-coordinate is offset
    leftMove2.beginElement();
    topMove2.beginElement();
    // Code for bottom menu box animation.
    leftMove3.to=mouseLeft;
    topMove3.to=mouseTop + 58;
    leftMove3.beginElement();
    topMove3.beginElement();
}
// Function is used to hide the menu when clicked.
function closeMenu(){
    oBox.style.display='none';
    oBox2.style.display='none';
    oBox3.style.display='none';
}
</SCRIPT>
</HEAD>
<!-- The "oncontextmenu" event is used to make the menu become visible and animate. -->
<BODY oncontextmenu="moveBox(); return false;" onclick="closeMenu();">
<H2>Dynamic Context Menu using HTML+TIME</H2>
<H2>点右???，在不同的位置点右?</H2><!-- Here are the menu blocks. Notice the vml behavior is attached to them, 
which enables the rounded corners of the menu blocks. -->
<v:ROUNDRECT ID="oBox" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2" fillColor='#ffcccc' 
onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffcccc'"
onclick="closeMenu(); alert('hello!');">
Home</v:ROUNDRECT >
        
<v:ROUNDRECT ID="oBox2" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2" fillColor='#ffcccc' 
onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffcccc'"
onclick="closeMenu(); alert('hello 2!');">
Articles</v:ROUNDRECT >
        
<v:ROUNDRECT  ID="oBox3" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2" fillColor='#ffcccc' 
onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffcccc'"
onclick="closeMenu(); alert('hello 3!');">
Contacts</v:ROUNDRECT > 
<!-- Here are the t:ANIMATE elements which control the animation of the
menu blocks. Notice that the "DUR" attribute values are different for each
pair of elements. This causes the blocks to move at different rates and follow
one another. -->
<t:ANIMATE 
        ID="leftMove" 
        TARGETELEMENT="oBox" 
        ATTRIBUTENAME='left' 
        BEGIN="indefinite" 
        DUR=".15" to="" 
        DECELERATE="1"
        FILL="freeze"
        onend="this.from=this.to"/>
<!-- Note that when each t:ANIMATE element ends, its "from" property is 
updated to the coordinate that the animation ends at. Thus, upon the next
animation, the menu starts its animation from the new location  -->
<t:ANIMATE 
        ID="topMove" 
        TARGETELEMENT="oBox" 
        ATTRIBUTENAME='top' 
        BEGIN="indefinite" 
        DUR=".15" to="" 
        DECELERATE="1"
        FILL="freeze"
        onend="this.from=this.to"/>
<t:ANIMATE 
        ID="leftMove2" 
        TARGETELEMENT="oBox2" 
        ATTRIBUTENAME='left' 
        BEGIN="indefinite" 
        DUR=".3" to=""  
        DECELERATE="1"
        FILL="freeze"
        onend="this.from=this.to"/>
<t:ANIMATE 
        ID="topMove2" 
        TARGETELEMENT="oBox2" 
        ATTRIBUTENAME='top' 
        BEGIN="indefinite" 
        DUR=".3" to=""  
        DECELERATE="1"
        FILL="freeze"
        onend="this.from=this.to"/>
<t:ANIMATE 
        ID="leftMove3" 
        TARGETELEMENT="oBox3" 
        ATTRIBUTENAME='left' 
        BEGIN="indefinite" 
        DUR=".6" to=""  
        DECELERATE="1"
        FILL="freeze"
        onend="this.from=this.to"/>
<t:ANIMATE 
        ID="topMove3" 
        TARGETELEMENT="oBox3" 
        ATTRIBUTENAME='top' 
        BEGIN="indefinite" 
        DUR=".6" to=""  
        DECELERATE="1"
        FILL="freeze"
        onend="this.from=this.to"/></BODY>
</HTML>

解决方案 »

  1.   

    实现方法很简单。 
    不过就是只有一层 
    <HTML> 
    <style> 
    a.menuitem {text-decoration:none;color:menutext} 
    a.menuitem:hover {background-color:highlight;color:highlighttext} 
    div.contextmenu {background-color:threedface;border-style:outset;border-width:2;position:absolute;visibility:hidden;z-index:999} 
    </style> 
    <BODY> 
    <div id=cmenu class=contextmenu> 
    <a href="http://www.oso.com.cn/">http://www.oso.com.cn</a><br> 
    <a href="http://www.oso.com.cn/">http://www.oso.com.cn</a><br> 
    <a href="http://www.oso.com.cn/">http://www.oso.com.cn</a><br> 
    <a href="http://www.oso.com.cn/">http://www.oso.com.cn</a><br> 
    </div> 
    </BODY> 
    <script> 
    function window.onbeforeunload() 
    { 
    cmenu.style.visibility="hidden"; 
    } 
    function document.onclick() 
    { 
    cmenu.style.visibility="hidden"; 
    } 
    function document.oncontextmenu() 
    { 
    var e=event.srcElement; 
    var l=event.offsetX;; 
    var t=event.offsetY; 
    do 
    { 
    l+=e.offsetLeft; 
    t+=e.offsetTop; 
    }while(e=e.offsetParent); 
    cmenu.style.pixelLeft=l; 
    cmenu.style.pixelTop=t; 
    cmenu.style.visibility="visible"; 
    event.returnValue=false; 
    } 
    function cmenu.oncontextmenu() 
    { 
    event.cancelBubble=true; 
    event.returnValue=false; 
    } 
    </script> 
    </HTML> 
      

  2.   

    谢谢大侠们的帮忙，小弟受益匪浅。
    但还想完善一下：
    1. 能否在选择某一菜单项的时候高亮显示该菜单项？（就像Windows的右键菜单）
    2. 能否设定某一菜单项是否可以被点击？（如果不能点击，应该显示成灰色。）万分感谢。:-)
      

  3.   

    onmouseover的时候改变样式就可以了highlight,highlighttext；禁止用disabled