点击右键出现导航菜单效果
将以下代码写入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>
|