html+css+js自定义右键菜单
2020-02-01 本文已影响0人
独步江雪
<!DOCTYPE html>
<html>
<head>
<title>自定义右键菜单</title>
<style>
ul{
display: none;
box-shadow: 0px 0px 5px;
text-align: center;
width: 160px;
height: 140px;
position: absolute;
margin: 0;
padding: 0;
}
li{
height: 34px;
line-height: 34px;
font-size: 16px;
list-style: none;
border-bottom: 1px solid #eee;
}
li:last-child{
border-bottom:none;
height: 35px;
line-height: 35px;
}
li:hover{
background-color:#eee;
}
</style>
</head>
<body>
<ul id='menu'>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</body>
<script>
var el=document.getElementById('menu');
document.oncontextmenu=function(event){
event.preventDefault();
el.style.display='block';
el.style.left=event.clientX+'px';
el.style.top=event.clientY+'px';
}
document.onclick=function(event){
el.style.display='none';
}
</script>
</html>
