使用过Windows的用户对于右键菜单肯定不陌生，在使用Windows的时候，右键菜单无处不在，对于用户来说是非常方便。
但是，在浏览网页的时候，如果可以对用户访问的网站定制一个右键菜单来实现对整个网站的导航，那无疑对访问者将是很方便的。
下面我们将用JavaScript一步一步创建这样的菜单。
第一步 加入菜单使用的样式
首先使用CSS为菜单层定制样式。
<style>
<！--
.skin0 {
position:absolute;
text-align:left;
width:200px；
border:2px solid black;
background-color:menu;
font-family：宋体；
line-height:20px；
cursor:default；
visibility:hidden；
}
.skin1{
cursor:default；
font:menutext；
position:absolute;
text-align:left;
Font-family: 宋体；
font-size: 9pt;
width:120px;
background-color:menu；
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {padding-left:15px;
padding-right:10px;
}
--></style>
第二步 加入Javascript处理函数
加入处理函数，把下面的代码放到网页中的<HEAD>和</HEAD>标签之间：
<SCRIPT LANGUAGE=“JavaScript1.2”>
<！--开始
//为菜单定制使用的样式。
var menuskin = “skin1”
//设置是否在状态栏中显示菜单项上URL。置为0表示不显示，置为1则显示。
var display_url = 0;
//定义函数showmenuie5()，该函数用来显示菜单。
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”；
}
//定义函数highlightie5()，在鼠标移动到菜单项上时使该菜单项高亮显示
function highlightie5()
{
//判断如果是菜单项，则高亮显示，设置其颜色为系统默认颜色。
if(event.srcElement.className == “menuitems”)
{
event.srcElement.style.backgroundColor = “highlight”；
event.srcElement.style.color = “white”；
//如果在状态栏中显示URL选项为真，则在状态栏中显示相应URL。
if (display_url)
window.status = event.srcElement.url;
}
}
/★ 定义函数lowlightie5()，该函数与上面的函数功能恰好相反，该函数取消高亮显示。★/
function lowlightie5()
{
if (event.srcElement.className == “menuitems”)
{
event.srcElement.style.backgroundColor = “”；
event.srcElement.style.color = “black”；
window.status = “”；
}
}
/★ 定义函数jumptoie5()，该函数处理单击菜单项中的选项的事件。
★/
function jumptoie5()
{
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>
第三步 设置和调用Javascript处理函数
我们需要在网页中定义用于显示菜单的层：
ID为ie5menu
响应onMouseOver事件的函数为highlightie5()
响应onMouseOut事件的函数为lowlightie5()
响应onClick事件的函数为jumptoie5()。
把下面的代码放到网页中的<BODY>和</BODY>标签之间：
<div id=“ie5menu” class=“skin0” onMouseover=“highlightie5()” onMouseout=“lowlightie5()” onClick=“jumptoie5()；”>
<div class=“menuitems” url=“javascripthistory.go(1)；”>前进</div>
<div class=“menuitems” url=“javascripthistory.back()；”>后退</div>
<hr>
<div class=“menuitems” url=“http://www.cpcw.com”>主页</div>
<hr>
<div class=“menuitems” url=“http://www.cpcw.com” target=“_blank”>电脑报</div>
<div class=“menuitems” url=“http://www.sina.com.cn” target=“_blank”>新浪</div>
<div class=“menuitems” url=“http://www.shou.com” target=“_blank”>搜狐</div>
<div class=“menuitems” url=“http://www.163.net/” target=“_blank”>163电子邮局</div>
<hr>
<div class=“menuitems” url=“mailtofozu@sina.com”>联系我们</div>
</div>
<！--下面的代码判断是否为IE5，然后处理。 -->
<script language=“JavaScript1.2”>
if (document.all && window.print)
{
ie5menu.className = menuskin
document.oncontextmenu = showmenuie5
document.body.onclick = hidemenuie5
}
</script>
然后用IE5打开该网页，就可以看到效果。你还可以自己修改创建出自己特色的个性化右键菜单。不过要注意的是：上面实现的功能耐需要在IE5及以上版本中才能正常显示。