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

sonic8135 2005-11-01 04:01:38

本人想在html中显示自定义的右键菜单，不知如何解决？
1. 使用JavasCript可否实现？如何实现？
2. 是否还有其他方法？
请大侠们帮忙。

...全文

713 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

dabinglian 2005-11-02

打赏
举报

楼上正解

dh20156 2005-11-02

打赏
举报

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

sonic8135 2005-11-02

打赏
举报

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

万分感谢。:-)

dabinglian 2005-11-01

打赏
举报

实现方法很简单。
不过就是只有一层
<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>

fantiny 2005-11-01

打赏
举报

<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>

<BODY oncontextmenu="moveBox(); return false;" onclick="closeMenu();">
<H2>Dynamic Context Menu using HTML+TIME</H2>
<H2>点右???，在不同的位置点右?</H2>


<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 >

<t:ANIMATE
ID="leftMove"
TARGETELEMENT="oBox"
ATTRIBUTENAME='left'
BEGIN="indefinite"
DUR=".15" to=""
DECELERATE="1"
FILL="freeze"
onend="this.from=this.to"/>

<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>