点击右键出现导航菜单效果
将以下代码写入body当中,然后浏览点击右键就可以看到效果。
点击右键看看!
<DIV style="LEFT: 1px; POSITION: absolute; TOP: 1px">
<STYLE>.skin0 {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; VISIBILITY: hidden; BORDER-LEFT: black 1px solid; WIDTH: 180px; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Verdana; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.skin1 {
BORDER-RIGHT: buttonhighlight 1px outset; BORDER-TOP: buttonhighlight 1px outset; FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 1px outset; WIDTH: 180px; CURSOR: default; BORDER-BOTTOM: buttonhighlight 1px outset; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.buyokmenu {
PADDING-RIGHT: 10px; PADDING-LEFT: 15px; PADDING-TOP: 5px
}
.buyokmenu2 {
PADDING-RIGHT: 10px; PADDING-LEFT: 15px; PADDING-TOP: 5px
}
</STYLE>
<SCRIPT language=JavaScript1.2>
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
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";
}
function highlightie5() {
if (event.srcElement.className == "buyokmenu") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "buyokmenu") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "buyokmenu") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
// End -->
</SCRIPT>
<DIV class=skin0 id=ie5menu onmouseover=highlightie5() onclick=jumptoie5();
onmouseout=lowlightie5()>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="13%" align=middle bgcolor="#FFDDC6">自由天堂右键菜单特效</TD>
<TD vAlign=center width="87%">
<DIV class=buyokmenu2>自由天堂欢迎您!</DIV>
<HR>
<DIV class=buyokmenu url="#">会员注册</DIV>
<HR>
<DIV class=buyokmenu url="javascript:history.back();">回到上一页</DIV>
<DIV class=buyokmenu url="javascript:window.scroll(0,0);">回到顶部</DIV>
<DIV class=buyokmenu url="index.asp">回到首页</DIV>
<HR>
<DIV class=buyokmenu url="#">关于我们</DIV>
<DIV class=buyokmenu url="#">网站帮助</DIV>
<DIV class=buyokmenu url="#">高级搜索</DIV>
<DIV class=buyokmenu url="#">联系站长</DIV>
<DIV class=buyokmenu url="#">我要留言</DIV>
<DIV class=buyokmenu url="http://bbs.web600.net">技术论坛</DIV>
<HR>
<DIV class=buyokmenu url="#"
target="_blank">管理员登陆</DIV></TD></TR></TBODY></TABLE></DIV>
<SCRIPT language=JavaScript1.2>
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</SCRIPT>
</DIV>