HTML与JavaScript上下文菜单
本文介绍了一个使用HTML和JavaScript实现的上下文菜单示例。该菜单通过鼠标右键点击显示，并采用绝对定位来确定其出现的位置。文章还展示了如何通过鼠标悬停效果展示和隐藏子菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#ul1 {
position: absolute;
display: none;
}
ul {
list-style: none;
}
li {
background-color: paleturquoise;
color: deeppink;
width: 100px;
text-align: center;
position: relative;
font-size: 12px;
}
li>ul {
width: 100px;
position: absolute;
left: 98px;
top: -2px;
display: none;
}
</style>
</head>
<body>
<ul id="ul1">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3
<ul>
<li>我是li3下的li1</li>
<li>我是li3下的li2</li>
<li>我是li3下的li3</li>
</ul>
</li>
<li>我是li4
<ul>
<li>我是li4下的li1</li>
<li>我是li4下的li2
<ul>
<li>我是li4下的li2下的li1</li>
<li>我是li4下的li2下的li2</li>
<li>我是li4下的li2下的li3</li>
</ul>
</li>
<li>我是li4下的li3</li>
</ul>
</li>
<li>我是li5</li>
</ul>
<script type="text/javascript">
var ul1 = document.getElementById("ul1");
var lis = document.getElementsByTagName("li");
document.oncontextmenu = function() {
ul1.style.display = "block";
var x = event.clientX;
var y = event.clientY;
ul1.style.left = x + "px";
ul1.style.top = y + "px";
return false;
}
document.onclick = function() {
ul1.style.display = "none";
}
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function(){
var child = this.children;
// li有孩子节点
if (child.length > 0) {
// 过滤其他标签
if (child[0].nodeName == "UL") {
child[0].style.display = "block";
}
}
}
lis[i].onmouseout = function(){
var child = this.children;
// li有孩子节点
if (child.length > 0) {
// 过滤其他标签
if (child[0].nodeName == "UL") {
child[0].style.display = "none";
}
}
}
}
</script>
</body>
</html>
扫一扫
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
