为网站定制IE右键菜单
网络与通信
想不想为你的网站量身定做一个IE右键菜单(如（图1）)，它取代了IE的右键菜单，具有极强的网站导航功能，方便网站的来访者！下面我们就举一个实例学习一下，大家在实际制作的时候，还可以根据自己的情况作相应的修改。
一、制作原理
在这个右键菜单的脚本程序中运用到了层(DIV)、样式表(CSS)以及JavaScript，所以这是一个典型的DHTML范例。
首先我们建立一个层作为菜单的“盒子”，所有的菜单项都放置在这个层中(每一个菜单项也是一个单独的层)。将这个层的默认的Visibility样式设置为隐藏。
然后再捕捉鼠标的右键事件，如果用户点击了鼠标右键，就将菜单的Visibility样式设置为显示。最后捕捉鼠标右键在菜单项上的移动，当鼠标移动到某一个菜单项的时候，动态改变菜单项所在层的背景色。
最后要提醒大家的是该右键菜单只支持微软的IE浏览器，如果要兼容Netscape的话，那么其代码将至少增大一倍，这将影响页面的下载速度，所以只能对Netscape说不了。
二、制作实战
1.定义菜单的样式外观
首先在网站的根目录下建立一个名为CSS的文件夹，然后使用文本编辑器建立一个文本文件，保存在CSS目录下并命名为menu.css，代码如下：
.clsMenu {
cursor:default；
color:menutext；
position:absolute；
width:165px；
background-color:menu；
border:1 solid buttonface；
visibility:hidden；
border:2 outset buttonhighlight；
}
.menuitems{
font-size:12px；
color:#000000；
padding-left:20px；
padding-right:10px；
line-height:18px
}
这里定义的两个类(class)将应用与菜单中，menu类应用于菜单的“盒子”，而menuitem类则应用于单个菜单项。为了做到从颜色到外观上都与浏览器的菜单一致，在这两个样式规则中没有使用十六进制或RGB的颜色代码。而是使用了一些系统颜色的名称，如：menutxt、buttonface。其中menutext表示的是菜单的字体颜色，buttonface代表的是按钮颜色。
2.创建右键菜单的JavaScript文件
先在网站根目录下新建一个js文件夹，然后新建一个文本文档，将这个文本文档保存在已经建好的js文件夹下，命名为menu.js，输入以下源代码(请勿输入说明文字)。
var strMenu = "
// 判断客户端浏览器
function ie() {
if (navigator.appName=="Microsoft Internet Explorer") {
return true；
} else {
return false；
}}
// 显示菜单
function showmenu(){
if (ie()) {
// 找出鼠标在窗口中的位置
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
// 如果横向的距离小于菜单的宽度
if (rightedge
menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth
else
// 否则，就在该位置显示菜单
menu.style.left=document.body.scrollLeft+event.clientX
// 与上面道理相同，判断纵向的位置
if (bottomedge
else
menu.style.top=document.body.scrollTop+event.clientY
menu.style.visibility="visible"
}
return false
}
// 隐藏菜单
function hidemenu(){
if (ie())menu.style.visibility="hidden"
}
// 菜单项获得焦点时加亮显示
function highlight(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="highlighttext"
}}
// 菜单项失去焦点
function lowlight(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="menutext"
}}
if (ie())document.write (strMenu)；
document.oncontextmenu= showmenu
document.body.onclick= hidemenu
三、把效果加入网页
由于现在大部分站长都是用Dreamweaver来编辑主页，下面我们就以Dreamweaver4.0为例来插入该右键菜单。
1.先打开要想插入该右键菜单的HTML文件，按下“Shift+F11”键打开Css Style面板，点击Css Style面板上的“Attach Style Sheet”按钮。在Select Style Sheet对话框中选择CSS文件夹下的menu.css。
2.将光标置于文档的最后，点击对象面板上的小三角，在弹出的菜单上选择Invisibles。
3.点击对象面板上的“Insert Script”(插入脚本)按钮。在Insert Script对话框中直接点击OK按钮。
4.在属性面板中点击“Browse for File”按钮，选择刚刚创建的JavaScript文件menu.js，插入到页面中，保存该页面。
到此，制作右键菜单的全部工作已经完成了，大家可以到我的网站 (http://chinese.vip.sina.com)去亲自看一下效果。