您当前位置：首页 > web前端 > jscript > 代码实例：CSS+JavaScript创建右击菜单

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

来源：程序员人生发布时间：2014-05-04 05:25:23 阅读次数：3006次

<%@ 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><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;elseie5menu.style.top = document.body.scrollTop + event.clientY; //设置菜单可见 liehuo.netie5menu.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="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.wfuyu.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()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 每月少挣2000块但是我还是选择阿里妈妈

下一篇 关于旅游SNS网站：一个人网站站长的见解

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点