JavaScriptCSS创建右击菜单效果代码_导航菜单

来源：动视网责编：小采时间：2020-11-27 20:40:50

JavaScriptCSS创建右击菜单效果代码_导航菜单

JavaScriptCSS创建右击菜单效果代码_导航菜单:效果图： css和javascript创建页面右键菜单 body { font-family: 宋体; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background

推荐度：

点击下载本文 文档为doc格式

导读JavaScriptCSS创建右击菜单效果代码_导航菜单:效果图： css和javascript创建页面右键菜单 body { font-family: 宋体; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background

效果图：

<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> 
 
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> 
右键菜单创建测试效果吧！ 
 
后退 
前进 
<hr> 
脚本之家 
photoshop教程 
javascript 
vbscript 
<hr> 
软件下载 
源码下载 
<hr> 
正则表达式 
联系我 
　　 
</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()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

JavaScriptCSS创建右击菜单效果代码_导航菜单

推荐度：

点击下载本文 文档为doc格式

标签：菜单特效菜单栏

热门焦点

JavaScriptCSS创建右击菜单效果代码_导航菜单

JavaScriptCSS创建右击菜单效果代码_导航菜单

JavaScriptCSS创建右击菜单效果代码_导航菜单

最新推荐

猜你喜欢

热门推荐