<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
background-color: rgb(255, 255, 255);
width: 300px;
border: 1px solid #ccc;
position: absolute;
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);
display: none;
}
.menu li {
list-style: none;
width: 100%;
}
.menu li a {
display: inline-block;
text-decoration: none;
color: #555;
/* width: calc(100% - 60px); */
width: 100%;
padding: 10px 0;
cursor: pointer;
/* padding-left: 60px; */
}
.menu li a span {
padding-left: 60px;
}
/* .menu li:first-of-type {
border-radius: 5px 5px 0 0;
} */
.menu li a:hover {
background-color: rgb(232, 232, 233);
}
</style>
</head>
<body>
<ul class="menu" id="menu">
<li><a><span>功能1</span></a></li>
<li><a><span>功能2</span></a></li>
<li><a><span>功能3</span></a></li>
<li><a><span>功能4</span></a></li>
<li><a><span>功能5</span></a></li>
</ul>
<script>
window.onload = function () {
// 获取节点
const menu = document.getElementById('menu');
//获取可视区宽度,高度
const winWidth = document.documentElement.clientWidth || document.body.clientWidth;
const winHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 点击空白区域 隐藏菜单
document.addEventListener('click', function () {
menu.style.display = 'none';
menu.style.left = 0 + 'px';
menu.style.top = 0 + 'px';
})
// 点击菜单
menu.addEventListener('click', function (event) {
const e = event || window.event;
console.log(e.target.innerText)
})
//右键菜单
document.oncontextmenu = function (event) {
const e = event || window.event;
menu.style.display = 'block';
// 获取鼠标坐标
let mouseX = e.clientX;
let mouseY = e.clientY;
// 判断边界值,防止菜单栏溢出可视窗口
if (mouseX >= (winWidth - menu.offsetWidth)) {
mouseX = winWidth - menu.offsetWidth;
} else {
mouseX = mouseX
}
if (mouseY > winHeight - menu.offsetHeight) {
mouseY = winHeight - menu.offsetHeight;
} else {
mouseY = mouseY;
}
menu.style.left = mouseX + 'px';
menu.style.top = mouseY + 'px';
return false;
}
}
</script>
</body>
</html>
网页自定义菜单
最新推荐文章于 2023-07-01 17:29:37 发布