CSS+JavaScript打造超酷右键菜单

发布时间：2006-03-27 23:57:31　来源：天极网网友评论 0 条

　　这三个函数可以说实现右键菜单功能的关键函数，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，所有的工作都做得差不多了，现在我们把上面讲的东西赶快组合起来看看实实在在的效果吧。

2/2 首页上一页 12