版本虽然很老也不符合标准了,不过代码是值得参考的,需要右键菜单的朋友可以参考下。
里面的代码修改也比较简单。
<html>
<head>
<title>ddd</title>
<style>
.dreammenu {
position:absolute;
visibility:hidden;
z-index:100;
overflow:hidden;
width:150px;
background-color:buttonface;
border:dimgray 1px solid !important;
border:buttonhighlight menu menu buttonhighlight 2px outset;
padding:1px !important;
padding:1px 1px 1px 0px;
font-size:12px;
}
.dreammenu ul {
margin:1px;
border-bottom:buttonhighlight 1px solid;
border-top:buttonshadow 1px solid;
}
.dreammenu a {
display:block;
width:100%;
padding:1px 2px 2px 20px;
cursor:default;
text-decoration:none;
color:#000000;
}
.dreammenu a:hover {
background:highlight;
color:#ffffff;
}
</style>
</head>
<body menu='menu'>
<!---这段js最好写进文件方便用,为了在51能运行就直接写进来了--->
<script>
/***
dreamcore - jslib/menu
date : dec 03, 2006
copyright: dreamsoft co.,ltd.
mail : dream@dreamsoft.ca
author : egmax
browser : ie5.0&+,firefox1.5&+,netscape7.0&+
update:
***/
if(!document.all) document.captureevents(event.mousedown);
var _tmenu = 0;
var _amenu = 0;
var _type = 'a';
document.onclick = _hidden;
function _hidden()
{
if(_tmenu==0) return;
document.getelementbyid(_tmenu).style.visibility='hidden';
_tmenu=0;
}
document.oncontextmenu = function (e)
{
_hidden();
var _obj = document.all ? event.srcelement : e.target;
if(_type.indexof(_obj.tagname) == -1) return;
_amenu = _obj.getattribute('menu');
if(_amenu == 'null') return;
if(document.all) e = event;
_showmenu(_amenu, e);
return false;
}
function _showmenu(eid, event)
{
var _menu = document.getelementbyid(eid);
var _left = event.clientx + document.body.scrollleft;
var _top = event.clienty + document.body.scrolltop;
_menu.style.left = _left.tostring() + 'px';
_menu.style.top = _top.tostring() + 'px';
_menu.style.visibility = 'visible';
_tmenu = eid;
}
/***
可以支持其他标签input,img
***/
</script>
<script>_type='input,a,div,body,img';</script>
<!-----设置一个菜单层---->
<div id="menu" class='dreammenu'>
<a href='http://www.jb51.net'>脚本之家</a>
<a href='http://www.baidu.com'> 百度</a>
<a href='http://www.g.cn'>google</a>
<a href='http://tools.jb51.net'>站长工具</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<!-----设置一个菜单层---->
<div id="menu2" class='dreammenu'>
<a href='0'>哈哈</a>
<a href='1'>我是个链接</a>
<a href='2'>好开心啊</a>
<a href='3'>查看</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<!-----设置一个菜单层---->
<div id="menu3" class='dreammenu'>
<a href='0'>哈哈</a>
<a href='1'>我是图片</a>
<a href='2'>虽然打不开</a>
<a href='3'>查看</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<table><tr><td height=100>
<!-----设置一个菜单menu属性---->
<a href='test.php' menu='menu2'>菜单1</a>
<a href='test.php' menu='menu2'>菜单2</a>
</td></tr></table>
<div style='height:300;' menu='menu'></div>
<img src='http://www.jb51.net/images/logo.gif' menu='menu3'>