<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>超酷網頁右鍵菜單</title>
<style>
body {
font-family: "宋體";
font-size: 12px;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}
/*定義菜單方框的樣式1*/
.skin0 {
position:absolute;
padding-top:2px;
padding-bottom:2px;
text-align:left;
width:100px; /*寬度，可以根據實際的菜單項目名稱的長度進行適當地調整*/
border:2px solid black;
background-color:menu; /*菜單的背景顏色方案，這裏選擇了系統默認的菜單顏色*/
font-size: 12px;
font-family:"Arial";
line-height:20px;
cursor:default;
visibility:hidden; /*初始時，設置爲不可見*/
}
/*定義菜單方框的樣式2*/
.skin1 {
padding-top:2px;
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: "Arial";
font-size: 10pt;
width:100px; /*寬度，可以根據實際的菜單項目名稱的長度進行適當地調整*/
background-color:menu; /*菜單的背景顏色方案，這裏選擇了系統默認的菜單顏色*/
border:1 solid buttonface;
visibility:hidden; /*初始時，設置爲不可見*/
border:2 outset buttonhighlight;
}
/*定義菜單條的顯示樣式*/
.menuitems {
font-family: "Arial";
padding:2px 1px 1px 10px;
}
-->
</style>
<script language="javascript">
<!--
//定義菜單顯示的外觀，可以從上面定義的2種格式中選擇其一
var menuskin = "skin1";
//是否在瀏覽器窗口的狀態行中顯示菜單項目條對應的鏈接字符串
var display_url = 0;
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()
{
//設置visibility爲hidden
ie5menu.style.visibility = "hidden";
}
//高亮度鼠標經過的菜單條項目
function highlightie5()
{
//如果鼠標經過的對象是menuitems，就重新設置背景色與前景色
//event.srcElement.className表示事件來自對象的名稱，必須首先判斷這個值，這很重要！
if (event.srcElement.className == "menuitems")
{
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
//將鏈接信息顯示到狀態行
//event.srcElement.url表示事件來自對象表示的鏈接URL
if (display_url)
{
window.status = event.srcElement.url;
}
}
}
//恢復菜單條項目的正常顯示
function lowlightie5()
{
if (event.srcElement.className == "menuitems")
{
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
//右鍵下拉菜單功能跳轉
function jumptoie5()
{
//轉到新的鏈接位置
var seltext=window.document.selection.createRange().text
if (event.srcElement.className == "menuitems")
{
//如果存在打開鏈接的目標窗口，就在那個窗口中打開鏈接
if (event.srcElement.getAttribute("target") != null)
{
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
}
else
{
//否則，在當前窗口打開鏈接
window.location = event.srcElement.url;
}
}
}
//-->
</script>
</head>
<body>
<center>
<p>點擊右鍵看看效果-<a href="http://www.webjx.com/" target="_blank">網頁教學網</a>
</p>
</center>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="javascript:history.back();">後退</div>
<div class="menuitems" url="javascript:history.forward();">前進</div>
<hr>
<div class="menuitems" url="http://www.webjx.com/" target="_blank">網頁教學</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/4.html" target="_blank">動畫製作</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/6.html" target="_blank">網絡編程</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/8.html" target="_blank">網頁素材</div>
<hr>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/15.html" target="_blank">視頻教程</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/5.html" target="_blank">網頁特效</div>
<hr>
<div class="menuitems" url="http://www.webjx.com/aboutus.htm" target="_blank">關於本站</div>
<div class="menuitems" url="mailto:[email protected]">聯繫我們</div>
</div>
</body>
</html>
<script language="JavaScript1.2">
//如果當前瀏覽器是Internet Explorer，document.all就返回真
if (document.all && window.print)
{
//選擇菜單方塊的顯示樣式
ie5menu.className = menuskin;
//重定向鼠標右鍵事件的處理過程爲自定義程序showmenuie5
document.oncontextmenu = showmenuie5;
//重定向鼠標左鍵事件的處理過程爲自定義程序hidemenuie5
document.body.onclick = hidemenuie5;
}
</script>