< style >

< !--

/*定义菜单方框的样式1*/

.skin0 {

position:absolute;

text-align:left;

width:200px;

/*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/

border:2px solid black;

background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/

font-family:Verdana;

line-height:20px;

cursor:default;

visibility:hidden; /*初始时，设置为不可见*/

}

/*定义菜单方框的样式2*/

.skin1 {

cursor:default;

font:menutext;

position:absolute;

text-align:left;

font-family: Arial, Helvetica,

sans-serif;

font-size: 10pt;

width:200px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/

background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/

border:1 solid

buttonface;

visibility:hidden; /*初始时，设置为不可见*/

border:2 outset

buttonhighlight;

}

/*定义菜单条的显示样式*/

.menuitems {

padding-left:15px; /*左间距*/

padding-right:10px; /*右间距*/

}

-- >

< /style >

< script LANGUAGE="Javascript1.2" >

< !--

//定义菜单显示的外观，可以从上面定义的2种格式中选择其一

var menuskin = "skin1";

//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串

var display_url = 0;

function showmenuie5() {

//显示菜单

//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置

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(){

//高亮度鼠标经过的菜单条项目

//如果鼠标经过的对象是menuitems，就重新设置背景色与前景色

//event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！

if

(event.srcElement.className == "menuitems") {

event.srcElement.style.backgroundColor = "highlight";

event.srcElement.style.color = "white";

//将链接信息显示到状态行

//event.srcElement.url表示事件来自对象表示的链接URL

if (display_url)

window.status = event.srcElement.url;

}

}

function

lowlightie5(){

//恢复菜单条项目的正常显示

if (event.srcElement.className

== "menuitems") {

event.srcElement.style.backgroundColor = "";

event.srcElement.style.color = "black";

window.status = "";

}

}

function jumptoie5(){

//转到新的链接位置

if

(event.srcElement.className == "menuitems") {

//如果存在打开链接的目标窗口，就在那个窗口中打开链接

if (event.srcElement.getAttribute("target") != null)

window.open(event.srcElement.url, event.srcElement.getAttribute("target"));

else

//否则，在当前窗口打开链接

window.location = event.srcElement.url;

}

}

// End -- >

< /script >

< /HEAD >

< BODY

>

< center >< h3 >在空白处点击鼠标右键，猜猜会看到什么 ？< /h3 ><

/center >< br >< br >

//定义菜单方框层ie5ment，并定义其显示样式以及相关的3个监测事件

< div id="ie5menu" class="skin0" onMouseover="highlightie5()"

onMouseout="lowlightie5()" onClick="jumptoie5();" >

//定义其中的菜单条项目

//根据你的需要，在这里添加其他的菜单条名称以及相应的链接URL

< div class="menuitems"

url="javascript:history.back();" >后退< /div >

< div

class="menuitems" url="javascript:history.forward();" >前进< /div

>

< hr >

< div class="menuitems"

url=" >ChinaByte学院< /div >

< div

class="menuitems" url=" >ChinaByte专栏天地<

/div >

< /div >

//页面加载后，首先执行的初始化脚本程序

< script

language="Javascript1.2" >

//如果当前浏览器是Internet Explorer，document.all就返回真

if (document.all && window.print) {

//选择菜单方块的显示样式

ie5menu.className = menuskin;

//重定向鼠标右键事件的处理过程为自定义程序showmenuie5

document.oncontextmenu = showmenuie5;

//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5

document.body.onclick =

hidemenuie5;

}

< /script >

< /body>< /html>

演示效果

OK！看了上面代码的详细解读，你是否领会了其中的技巧？软件真是无所不能，是吗？

想要看看到底是怎样的神奇效果吗？不要犹豫，请点击这里！[@more@]

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/9650775/viewspace-922821/，如需转载，请注明出处，否则将追究法律责任。