模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
仿Windows XP风格的右键菜单_菜单导航特效
查看演示效果
特效Tag：
菜单
右键
添加
仿Windows XP风格的右键菜单，带图标，视觉舒服。和XP系统的菜单很相似。
<HTML> <HEAD> <TITLE>仿XP右键菜单</TITLE> <FCK:META mrc="text/html; charset=gb2312" http-equiv=Content-Type /> <FCK:META mrc="MSHTML 5.00.2920.0" name=GENERATOR /> <script> <!-- function contextMenu() { this.items = new Array(); this.addItem = function (item) { this.items[this.items.length] = item; } this.show = function (oDoc) { var strShow = ""; var i; strShow = "<div id=\"rightmenu\" style=\"BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10\">"; strShow += "<table border=\"0\" height=\""; strShow += this.items.length * 20; strShow += "\" cellpadding=\"0\" cellspacing=\"0\">"; strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\" width=\"2\"></td><td>"; strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">"; strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>"; strShow += "</td><td width=\"2\"></td></tr>"; strShow += "<tr><td bgcolor=\"#d0d0ce\"></td><td>"; strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=3 cellspacing=0 bgcolor=\"#ffffff\">"; oDoc.write(strShow); for(i=0; i<this.items.length; i++) { this.items[i].show(oDoc); } strShow = "</table></td><td></td></tr>"; strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\"></td><td>"; strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">"; strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>"; strShow += "</td><td></td></tr>"; strShow += "</table></div>\n"; oDoc.write(strShow); } } // menu Item object function contextItem(text, icon, cmd, type) { this.text = text ? text : ""; this.icon = icon ? icon : ""; this.cmd = cmd ? cmd : ""; this.type = type ? type : "menu"; this.show = function (oDoc) { var strShow = ""; if(this.type == "menu") { strShow += "<tr "; strShow += "onmouseover=\"changeStyle(this, 'on');\" "; strShow += "onmouseout=\"changeStyle(this, 'out');\" "; strShow += "onclick=\""; strShow += this.cmd; strShow += "\">"; strShow += "<td class=\"ltdexit\" width=\"16\">"; if (this.icon == "") strShow += " "; else { strShow += "<img border=\"0\" src=\""; strShow += this.icon; strShow += "\" width=\"16\" height=\"16\" style=\"POSITION: relative\"></img>"; } strShow += "</td><td class=\"mtdexit\">"; strShow += this.text; strShow += "</td><td class=\"rtdexit\" width=\"5\"> </td></tr>"; } else if (this.type == "separator") { strShow += "<tr><td class=\"ltdexit\"> </td>"; strShow += "<td class=\"mtdexit\" colspan=\"2\"><hr color=\"#000000\" size=\"1\"></td></tr>"; } oDoc.write(strShow); } } function changeStyle(obj, cmd) { if(obj) try { var imgObj = obj.children(0).children(0); if(cmd == 'on') { obj.children(0).className = "ltdfocus"; obj.children(1).className = "mtdfocus"; obj.children(2).className = "rtdfocus"; if(imgObj) { if(imgObj.tagName.toUpperCase() == "IMG") { imgObj.style.left = "-1px"; imgObj.style.top = "-1px"; } } } else if(cmd == 'out') { obj.children(0).className = "ltdexit"; obj.children(1).className = "mtdexit"; obj.children(2).className = "rtdexit"; if(imgObj) { if(imgObj.tagName.toUpperCase() == "IMG") { imgObj.style.left = "0px"; imgObj.style.top = "0px"; } } } } catch (e) {} } function showMenu() { var x, y, w, h, ox, oy; x = event.clientX; y = event.clientY; var obj = document.getElementById("rightmenu"); if (obj == null) return true; ox = document.body.clientWidth; oy = document.body.clientHeight; if(x > ox || y > oy) return false; w = obj.offsetWidth; h = obj.offsetHeight; if((x + w) > ox) x = x - w; if((y + h) > oy) y = y - h; obj.style.posLeft = x + document.body.scrollLeft; obj.style.posTop = y + document.body.scrollTop; obj.style.visibility = "visible"; return false; } function hideMenu() { if(event.button == 0) { var obj = document.getElementById("rightmenu"); if (obj == null) return true; obj.style.visibility = "hidden"; obj.style.posLeft = 0; obj.style.posTop = 0; } } function writeStyle() { var strStyle = ""; strStyle += "<STYLE type=text/css>"; strStyle += "TABLE {Font-FAMILY: \"Tahoma\",\"Verdana\",\"宋体\"; FONT-SIZE: 9pt}"; strStyle += ".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}"; strStyle += ".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}"; strStyle += ".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; CURSOR: hand}"; strStyle += ".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px solid}"; strStyle += ".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CURSOR: hand}"; strStyle += ".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}"; strStyle += "</STYLE>"; document.write(strStyle); } function makeMenu() { var myMenu, item; var homepage_cmd = "this.style.behavior='url(#default#homepage)';this.setHomePage('/'); return false;"; var favorate_cmd = "window.external.addFavorite('/','模板无忧'); return false;"; var viewcode_cmd = "window.location = 'view-source:' + window.location.href"; myMenu = new contextMenu(); item = new contextItem("模板无忧", "http://mb5u.com/jscss/demoimg/200905/home.gif", "top.location='/';", "menu"); myMenu.addItem(item); item = new contextItem("设为主页", "http://mb5u.com/jscss/demoimg/200905/home.gif", homepage_cmd, "menu"); myMenu.addItem(item); item = new contextItem("加进收躲夹", "http://mb5u.com/jscss/demoimg/200905/favadd.gif", favorate_cmd, "menu"); myMenu.addItem(item); item = new contextItem("联系作者", "http://mb5u.com/jscss/demoimg/200905/mail.gif", "location.href='mailto:info@mb5u.com'", "menu"); myMenu.addItem(item); item = new contextItem("", "", "", "separator"); myMenu.addItem(item); item = new contextItem("查看源代码", "http://mb5u.com/jscss/demoimg/200905/edit.gif", viewcode_cmd, "menu"); myMenu.addItem(item); myMenu.show(this.document); delete item; delete myMenu; } function toggleMenu(isEnable) { if(isEnable) document.oncontextmenu = showMenu; else document.oncontextmenu = new function() {return true;}; } writeStyle(); makeMenu(); document.onclick = hideMenu; document.oncontextmenu = showMenu; file://--> </script> </HEAD> <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="3"> <tr><td valign="top"> <div id="docBoard" style="width: 100%"> 点击一下右键看看! </div> </td> </tr> </table> </body> </HTML>
所属频道：
菜单导航特效
/
更新时间：2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
带阴影的CSS菜单
鼠标滑过放大菜单项的仿FLASH菜单
清新兼容性好的水平CSS菜单
纯CSS打造中英文双语导航菜单
编辑推荐：DIV+CSS仿京东商城导航条
在横线中间的简洁CSS菜单
JS+CSS打造另类带提示的竖向导航菜单
多种文本框输入格式限制的JS代码
浅黄色简洁CSS栏目导航
仿淘宝支付宝网站的漂亮导航菜单
猜你也喜欢看这些
Marquee 图片滚动特效
图片的翻页效果，基于jquery的实现方法
JavaScript点击显示、隐藏层或图片的代码
超酷的图片透明度动画变化特效
改变网页背景图片
JavaScript自制GIF动画，这是代码
图片的左右移动，动画特效实现
天极网的JS卡通图片切换
礼花背景：深隧的天空不断爆出多彩的礼花
最简的JavaScript鼠标经过切换图片
相关链接：
复制本页链接
|
搜索仿Windows XP风格的右键菜单
特效说明：
菜单导航模板
-
仿Windows XP风格的右键菜单
。
。。