JavaScript CSS创建右击菜单效果代码

更新时间：2008年12月02日 15:02:52 作者：

右击菜单效果

效果图：

<!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> <script language='javascript'> function load1(){ if (document.all && window.print) { document.oncontextmenu = showmenuie5; document.onclick = hidemenuie5; } } 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() { ie5menu.style.visibility = "hidden"; } //jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项 function jumptoie5() { if (event.srcElement.getAttribute("target") != null) window.open(event.srcElement.url, event.srcElement.getAttribute("target")); else window.location = event.srcElement.url; } load1() </script> </head> <body> 右键菜单创建测试效果吧！ <div id="ie5menu" class="skin0"> <div onclick="alert('后退请三思！)">后退</div> <div onclick="alert('祝你前程似锦，大胆往前走吧！')">前进</div> <hr> <div url="https://www.jb51.net" target="_blank" onclick="jumptoie5()">脚本之家</div> <div url="https://www.jb51.net/photoshop/" target="_blank" onclick="jumptoie5()">photoshop教程</div> <div url="https://www.jb51.net/list/list_3_1.htm" target="_blank" onclick="jumptoie5()">javascript</div> <div url="https://www.jb51.net/list/list_114_1.htm" target="_blank" onclick="jumptoie5()">vbscript</div> <hr> <div url="https://www.jb51.net/softs/index.html" target="_blank" onclick="jumptoie5()">软件下载</div> <div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()">源码下载</div> <hr> <div url="https://www.jb51.net/list/list_6_1.htm" target="_blank" onclick="jumptoie5()">正则表达式</div> <div url="https://www.jb51.net/support.htm" onclick="jumptoie5()">联系我</div> </div>　　 </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

代码解释：
1、在页面载入时，先执行load1()方法
首先检验是不是IE浏览器，如果当前浏览器是Internet Explorer，document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5，当用户产生左键事件时就调用函数hidemenuie5。
2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。
当然，这里的菜单并不是真正意义的右键菜单，而是我们自己做的一个div，在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐，这就达到了使用鼠标右键一样的效果了。
这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，你也可以根据自定义其他样式，然后替换skin0。
3、点击菜单选项后的操作
jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

您可能感兴趣的文章:

javascript 弹性菜单，垂直的那种
javascript 垂直弹性菜单
2008-12-12
代码经过精简后的仿QQ折叠菜单代码
代码经过精简后的仿QQ折叠菜单，以前发过的，不过这个是经过几轮代码精简后的一个版本，而且在各浏览器下的表现也很不错，兼容性没出问题。
2010-09-09
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
超酷的鼠标拖拽翻页(分页)效果实现javascript代码,非常的不错。
2009-09-09
Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12
鼠标滑过放大显示效果的列表
非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些tips消息框效果
2008-12-12
用js实现网页上模仿桌面右键菜单
用js实现网页上模仿桌面右键菜单...
2007-03-03
改写一个简单的菜单弹性大小
看到一个简单的菜单样式，由于是作者比较早的作品，视觉效果不太好，有点突兀自己做了一点小修改，模仿icon动画的效果(区别的关键点是getStyle取得当前计算样式这个函数)
2010-12-12
yahoo首页伸缩效果代码
js伸缩效果代码
2008-05-05
一个不错的渐显菜单
一个不错的渐显菜单...
2007-05-05
javascript实现的树型下拉框改进版
发现上一个版本，如果数据顺序颠倒就会出现问题，现在加以改进，
2008-09-09