HTML+CSS+JavaScript 实现三级菜单逐级展开效果

最新推荐文章于 2023-10-30 15:11:44 发布

Jus sing

最新推荐文章于 2023-10-30 15:11:44 发布

阅读量1.4k

点赞数 3

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/hcc13974721431/article/details/122390647

版权

在这里插入图片描述

<!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>三级菜单</title> 
</head> 
<style> 
* {
margin: 0; 
padding: 0; 
box-sizing: border-box; 
}
li {
list-style: none; 
}
.menu { 
width: 300px; 
padding-top: 20px; 
height: 800px;
box-shadow: 0 0 5px 2px #ccc; 
}
.menu1 { 
position: relative; 
background-color: #E9EAEC; 
}
.menu2 { 
background-color: #F4F6F7; 
}
.menu3 { 
background-color: #fff; 
}
.menu2, .menu3 { 
display: none; 
position: absolute; 
top: 0; 
left: 295px; 
}
.menu .item { 
cursor: pointer;
height: 50px; 
line-height: 50px; 
padding: 0 20px; 
}
.menu .tit { 
display: flex; 
justify-content: space-between; 
align-items: center; 
}
.menu .arrow { 
font-size: 22px; 
color: #999; 
}
.menu1>.item, .menu2>.item { 
border-top: 1px solid #bbb; 
}
.menu1>.item:last-of-type, .menu2>.item:last-of-type { 
border-bottom: 1px solid #bbb; 
}
.menu1>.item:hover, .menu2>.item:hover { 
background-color: #CFD3D8;
}
.menu3 { 
padding-left: 20px; 
padding-right: 20px; 
}
.menu3 .item1 { 
position: relative; 
font-weight: bold; 
border-bottom: 1px solid #bbb; 
}
.menu3 .item1:before { 
position: absolute; 
top: 20px; 
left: 0; 
content: ''; 
width: 10px; 
height: 10px; 
border-radius: 50%; 
background-color: skyblue; 
}
svg {width: 18px; 
} 
</style> 
<body> 
<ul class="menu menu1"> 
<li class="item"> 
<div class="tit"> 
<span>解决方案</span> 
<span class="arrow">></span> 
</div> 
<ul class="menu menu2"> 
<li class="item"> 
<div class="tit"> 
<span>通用解决方案</span> 
<span class="arrow">></span> 
</div> 
<ul class="menu menu3"> 
<li class="item item1">网络安全</li> 
<li class="item">DDoS 防护</li> 
<li class="item">云防火墙</li> 
<li class="item">网络入侵防护系统</li><li class="item">样本智能分析平台</li> 
<li class="item">高级威胁检测系统</li> 
</ul> 
</li> 
<li class="item"> 
<div class="tit"> 
<span>行业解决方案</span> 
</div> 
</li> 
<li class="item"> 
<div class="tit"> 
<span>云智大数据与 AI</span> 
</div> 
</li> 
<li class="item"> 
<div class="tit"> 
<span>区块链解决方案</span> 
</div> 
</li> 
</ul> 
</li>
</ul> 
</body> 
<script> 
var menu1Items = document.querySelectorAll('.menu1>.item') 
var menu2 = document.querySelector('.menu2') 
var menu2Items = document.querySelectorAll('.menu2>.item') 
var menu3 = document.querySelector('.menu3') 
menu1Items[0].addEventListener('mouseenter', function() { 
menu2.style.display = 'block' 
})
menu1Items[0].addEventListener('mouseleave', function() { 
menu2.style.display = 'none' 
})
menu2Items[0].addEventListener('mouseenter', function() { 
menu3.style.display = 'block' 
})
menu2Items[0].addEventListener('mouseleave', function() { 
menu3.style.display = 'none' 
}) 
</script>
</html>