这三个函数可以说实现右键菜单功能的关键函数,showmenuie5()函数定义了id为ie5menu的div在 document.oncontextmenu的基本属性,包括其显示的位置,其位置由鼠标位置决定,也就是说鼠标在何处点击那么该div就在何处显示,并且有非常重要的一点,那就是此时该div的样式的visibility属性值一定是visible,即是可见的,否则前面定义其显示位置也就没有什么意义了。hidemenuie5()函数简单地定义了ie5menu的visibiliy属性为隐藏。jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情,也就是执行选项,包括打开窗口链接或者执行脚本语句,有一点需要提醒的是不管是窗口链接或者脚本语句,它们都等于url的值,例如: url="http://homepage.yesky.com",url="javascript:window.location='http://homepage.yesky.com'; "或者url="javascript:history.back();"这些东西在jumptoie5函数中都可以执行。
既然本文讲的是用css+javascript实现右键菜单,前面讲到的都是javascript,好像还没有涉及到css,不用着急,下面就要用css来定义右键菜单的样式,否则这所谓的右键菜单就乱成一踏糊涂了。
首先看看ie5menu的样式skin0和skin1(根据不同的浏览器调用不同的皮肤),为了使“弹出”的右键菜单更具真实性,这里我们要模拟真实右键菜单的样式,请看下面的样式代码:
body {
font-family: "宋体";
font-size: 12px;
}
/*定义菜单方框的样式1*/
.skin0 {
position:absolute;
padding-top:4px;
text-align:left;
width:100px; /*宽度,可以根据实际的菜单项目名称的长度进行适当地调整*/
border:2px solid black;
background-color:menu; /*菜单的背景颜色方案,这里选择了系统默认的菜单颜色*/
font-family:"宋体";
line-height:20px;
cursor:default;
visibility:hidden; /*初始时,设置为不可见*/
}
/*定义菜单方框的样式2*/
.skin1 {
padding-top:4px;
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: "宋体";
font-size: 10pt;
width:100px; /*宽度,可以根据实际的菜单项目名称的长度进行适当地调整*/
background-color:menu; /*菜单的背景颜色方案,这里选择了系统默认的菜单颜色*/
border:1 solid buttonface;
visibility:hidden; /*初始时,设置为不可见*/
border:2 outset buttonhighlight;
}
/*定义菜单条的显示样式*/
.menuitems {
padding:2px 1px 2px 10px;
}
-->
上面的样式定义非常简单,但其属性值则是经过仔细调试而得到的,使其显示的结果尽量接近真实的右键菜单。
ok,所有的工作都做得差不多了,现在我们把上面讲的东西赶快组合起来看看实实在在的效果吧。
