JSFiddle - React, Tailwind, and code Playground

by crab1127

HTML

<ul id="menu">
    <li><em class="cut"></em><a href="javascript:;">剪切</a></li>
    <li><em class="copy"></em><a href="javascript:;">复制</a></li>
    <li><em class="paste"></em><a href="javascript:;">粘贴</a></li>
</ul>

CSS

body,ul,li{margin:0;padding:0;}
body{font:12px/24px arial;}
#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}
#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}
#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}
#menu li.active{background:#999;}
#menu li.active a{color:#fff;background:#8f8f8f;}
#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(http://fgm.cc/learn/lesson5/img/ico.png) no-repeat;}
#menu li em.cur{background-position:0 0;}
#menu li em.copy{background-position:0 -24px;}
#menu li em.paste{background-position:0 -48px;}

JavaScript

var oMenu = document.getElementById('menu');
var aLi = oMenu.getElementsByTagName('li');
oMenu.style.display = 'none';
for (var i = 0; i < aLi.length; i++) {
    //鼠标移入样式
    aLi[i].onmouseover = function() {
        this.className = 'active';
    }
    //鼠标移除样式
    aLi[i].onmouseout = function() {
        this.className = '';
    }
}
//自定义菜单
document.oncontextmenu = function(event) {
    var event = event || window.event;
    var style = oMenu.style;
    style.display = 'block';
    style.left = event.clientX + 'px';
    style.top = event.clientY + 'px';
    return false;
}

//页面点击后自定义菜单消失
document.onclick = function() {
    oMenu.style.display = 'none'
}