<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0053)http://www.7dspace.com/files/download/contentmenu.htm -->
<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>
BODY {
FONT-SIZE: 12px; MARGIN: 10px 0px 0px; FONT-FAMILY: "宋体"
}
.skin0 {
BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; VISIBILITY: hidden;
BORDER-LEFT: black 2px solid; WIDTH: 100px; CURSOR:default; LINE-HEIGHT: 20px;
PADDING-TOP: 4px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: "宋体"; POSITION: absolute;
BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.skin1 {
BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset;
FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset;
WIDTH: 100px; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: buttonhighlight 2px outset;
FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.menuitems {
PADDING-RIGHT: 1px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
</STYLE>
<SCRIPT language=javascript>
<!--
//定义菜单显示的外观，可以从上面定义的2种格式中选择其一
var menuskin = "skin0";
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串
var display_url = false;
function getEvent(){ //同时兼容ie和ff的写法
if(document.all)
return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
function showmenuie5() {
//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置
var event=arguments[0] || window.event;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度
if (rightedge <ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
//否则，就定位菜单的左坐标为当前鼠标位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;
//如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度
if (bottomedge <ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
//否则，就定位菜单的上坐标为当前鼠标位置
ie5menu.style.top = document.body.scrollTop + event.clientY;
//设置菜单可见
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
//隐藏菜单
//很简单，设置visibility为hidden就OK！
ie5menu.style.visibility = "hidden";
}
function highlightie5(evt) {
//高亮度鼠标经过的菜单条项目
//如果鼠标经过的对象是menuitems，就重新设置背景色与前景色
//event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "highlight";
element.style.color = "white";
//将链接信息显示到状态行
//event.srcElement.url表示事件来自对象表示的链接URL
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5(evt) {
//恢复菜单条项目的正常显示
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "";
element.style.color = "black";
//window.status = "";
}
}
//右键下拉菜单功能跳转
function jumptoie5(evt) {
//转到新的链接位置
var event=evt || window.event;
var element=event.srcElement || event.target;
//var seltext=window.document.selection.createRange().text
if (element.className == "menuitems") {
//如果存在打开链接的目标窗口，就在那个窗口中打开链接
if (element.getAttribute("target") != null) {
window.open(element.getAttribute("url"), element.getAttribute("target"));
} else
//否则，在当前窗口打开链接
window.location = element.getAttribute("url");
}
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<P>点击右键看看效果-<A href="http://www.7dspace.com/" target=_blank>七度空间网页教学网</A>
</P></CENTER>
<br>
<b id="test">点击右键看看效果</b>
<br>
<br>
<br>
<b id="test1">点击右键看看效果</b>
<DIV class=skin0 id=ie5menu onmouseover=highlightie5(event) onclick=jumptoie5(event); onmouseout=lowlightie5(event)>
<DIV class=menuitems url="javascript:history.back();">后退</DIV>
<DIV class=menuitems url="javascript:history.forward();">前进</DIV>
<HR>
<DIV class=menuitems target="_blank">Menu1</DIV>
<DIV class=menuitems target="_blank">Menu2</DIV>
<DIV class=menuitems target="_blank">Menu3</DIV>
<DIV class=menuitems target="_blank">Menu4</DIV>
<HR>
<DIV class=menuitems target="_blank">Menu5</DIV>
<DIV class=menuitems target="_blank">Menu6</DIV>
<HR>
<DIV class=menuitems target="_blank">Menu7</DIV>
<DIV class=menuitems >Menu8</DIV>
</DIV>
<SCRIPT language=JavaScript1.2>
//如果当前浏览器是Internet Explorer，document.all就返回真
//选择菜单方块的显示样式
//ie5menu=document.getElementById("ie5menu");
ie5menu.className = menuskin;
//重定向鼠标右键事件的处理过程为自定义程序showmenuie5
document.getElementById("test").oncontextmenu = showmenuie5;
document.getElementById("test1").oncontextmenu = showmenuie5;
//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5
document.body.onclick = hidemenuie5;
</SCRIPT>
</BODY>
</HTML>
