- <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='0'>您好</a>
- <a href='1'>我是主菜单</a>
- <a href='2'>在页面上单击</a>
- <a href='3'>就可以看到我</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://bbs.51js.com/images/default/logo.gif' menu='menu3'>
- </body>
- </html>
支持不同对象不同菜单,兼容IE、Firefox
使用时候注意:
1.表格的需要给td,div用,tr和table是用不上了
2.如果出现提示第76行错误,即 _Menu.style.left = _Left.toString() + 'px'; 这句话有错的话,说明拿到了一个空值,需要在第73行和第74行之间添加一句话进行判断,即 if(_Menu==null) return;
3.在火狐中可能提示第50行 captureEvents(Event.MOUSEDOWN); 这个方法过期,不影响使用,请高手完善一下。
4.在火狐中,载入之后,控制台可以看见一个错误(不影响使用),第14行的 border:buttonhighlight menu menu buttonhighlight 2px outset; 错误,请高手完善一下。
感谢原作者,帮了我一个大忙
修改一处严重错误:第66行 if(_Amenu == 'null') return; ,应为 if(_Amenu == null) return;
判断不应该是对字符串判断,应该是对空值的判断,所以引号不能要!否着IE浏览器下面会提示错误。上面的已经改过了,可以放心拷贝