代码实例：CSS+JavaScript创建右击菜单

发布时间：2018-08-21 04:49:52 所属栏目：模式来源：站长网

导读：%@ page language=java pageEncoding=GBK %!DOCTYPE HTML PUBLIC -//w3c//dtd html 4.0 transitional//enhtmlheadtitlecss和javascript创建页面右键菜单/titlestyle type=text/cssbody {font-family: 宋体;font-size: 12px;}.skin0 {padding-top: 4px;text

<%@ page language="java" pageEncoding="GBK" %> <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>css和javascript创建页面右键菜单</title> <style type="text/css"> body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default; visibility: hidden; } .skin1 { padding-top: 4px; cursor: default; font: menutext; text-align: left; font-family: "宋体"; font-size: 10pt; width: 100px; background-color: menu; border: 1 solid buttonface; visibility: hidden; border: 2 outset buttonhighlight; } </style> </head> <body> 右键菜单创建测试效果吧！ <div id="ie5menu" class="skin0"> <div onclick="alert('后退请三思！)">后退</div> <div onclick="alert('祝你前程似锦，大胆往前走吧！')">前进</div> <hr> <div url="http://homepage.yesky.com" target="_blank" onclick="jumptoie5()">网页淘吧</div> <div url="http://www.bewww.net/" target="_blank" onclick="jumptoie5()">速查手册</div> <div url="http://wiki.mapbar.com/wiki2_0/edit.jsp?gid=1876" target="_blank" onclick="jumptoie5()">淘吧地图</div> <div url="http://news.sohu.com/20081123/n260795459.shtml" target="_blank" onclick="jumptoie5()">征稿启事</div> <hr> <div url="http://soft.yesky.com" target="_blank" onclick="jumptoie5()">天极软件</div> <div url="http://www.mydown.com/soft/" target="_blank" onclick="jumptoie5()">天极网站</div> <hr> <div url="http://liutao-2006-126-com.javaeye.com" target="_blank" onclick="jumptoie5()">关于本站</div> <div url="http://www.veryhuo.com" onclick="jumptoie5()">烈火建站学院</div> </div>　　 </body> </html>

代码解释：

1、在页面载入时，先执行load1()方法

首先检验是不是IE浏览器，如果当前浏览器是Internet Explorer，document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5，当用户产生左键事件时就调用函数hidemenuie5。

2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。

当然，这里的菜单并不是真正意义的右键菜单，而是我们自己做的一个div，在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐，这就达到了使用鼠标右键一样的效果了。

这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，你也可以根据自定义其他样式，然后替换skin0。

3、点击菜单选项后的操作

jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!