<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .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> <div id="menu" class='DreamMenu'> <a>您好</a> <a>我是主菜单</a> <a>在页面上单击</a> <a>就可以看到我</a> <ul></ul> <a>打印</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> <!-----设置一个菜单menu属性----> <div menu='menu' class="menu1" style=" 100px; height: 100px; border: 1px solid red;">菜单1</div> <div menu='menu2' class="menu2" style=" 100px; height: 100px; border: 1px solid red;">菜单2</div> <div menu='menu3' class="menu3" style=" 100px; height: 100px; border: 1px solid red;">菜单3</div> </body> </html> <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script> <script type="text/javascript"> if(!document.all) document.captureEvents(Event.MOUSEDOWN); var _Tmenu = 0; var _Amenu = 0; var _Type = 'A'; var TimeFn = null; 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; } </script> <script> _Type = 'INPUT,A,DIV,BODY,IMG'; </script>