求一款js制作的精美右键菜单特效

要求：
1.使用简单可靠
2.要能在不同区域内显示不同的右键菜单
先谢谢各位高手了

解决方案 »

  1.   

    这款满足要求但不好看<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     : [email protected]
    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;
    //alert(_Amenu);
        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.shmec.gov.cn'>您好</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>
    <div id="menu4" class="DreamMenu">
    <form>
    <input type="text" size="20" />
    <input type="submit" value="close" />
    </form>
    </div>
    <table><tr><td height=100>
    <!-----设置一个菜单menu属性---->
    <a href='test.php' menu='menu2'>菜单1</a>
    <a href='test.php' menu='menu4'>菜单2</a>
    </td></tr></table>
    <div style='height:300;' menu='menu'></div>
    <img src='http://bbs.51js.com/images/default/logo.gif' menu='menu3'>