下面我们来设计一个div，请看代码：
＜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://homepage.yesky.com" target="_blank"＞网页陶吧＜/div＞
＜div class="menuitems" url="http://www.yesky.com/imagesnew/software/html/index.html" target="_blank"＞速查手册＜/div＞
＜div class="menuitems" url="http://www.yesky.com/imagesnew/software/luokl/sitemap.htm" target="_blank"＞陶吧地图＜/div＞
＜div class="menuitems" url="http://soft.yesky.com/45/2280045.shtml" target="_blank"＞征稿启事＜/div＞
＜hr＞
＜div class="menuitems" url="http://soft.yesky.com" target="_blank"＞天极软件＜/div＞
＜div class="menuitems" url="http://www.yesky.com" target="_blank"＞天极网络＜/div＞
＜hr＞
＜div class="menuitems" url="http://homepage.yesky.com" target="_blank"＞关于本站＜/div＞
＜div class="menuitems" url="mailto:luokl@chinabyte.com"＞联系我们＜/div＞
＜/div＞
这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，当这个div处于显示状态时可能产生 onMouseover事件和onMouseout事件以及onClick事件，就像我们在使用右键菜单时要对其中的选项进行操作一样，这里的 onMouseover事件、onMouseout事件和onClick事件能够模拟整个鼠标右键事件。这里，我在右键菜单中定义了这么几个选项：页面操作功能、栏目导航功能、站点导航功能以及其它信息，能够起到良好的用户体验效果。
这里使用了div的url属性，其值可以是事件也可以是页面地址，当然，这个地址包括绝对地址和相对地址，上面的事件也很简单这里就不需要我多说了。
下面我们来分析几个函数：showmenuie5()函数（显示菜单）hidemenuie5()函数（隐藏菜单）以及jumptoie5()函数（右键菜单选项跳转）
showmenuie5()函数：
/*显示菜单*/
function showmenuie5() {
searchform.k.value=window.document.selection.createRange().text;
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
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;
}
hidemenuie5()函数:
/*隐藏菜单*/
function hidemenuie5() {
/*很简单，设置visibility为hidden就OK！*/
ie5menu.style.visibility = "hidden";
}
jumptoie5()函数：
/*转到新的链接位置*/
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;
}
}
