多级菜单
2019-05-10 本文已影响0人
梧桐芊雨
菜单效果显示
image.png
运行以下代码既可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
font-size: 15px;
color: #666666;
text-decoration: none;
}
li{
list-style: none;
}
.topmenus{
background: #373d41;
}
.topnav{
position: relative;
width: 10%;
height: 20px;
text-align: center;
border: 1px solid deepskyblue;
background: deepskyblue;
padding: 10px;
}
.bodyDiv .navs{
}
.bodyDiv .navs .navsLi,.sonnavs .sonnavsLi{
transition: 1s all;
position: relative;
display: block;
height: 24px;
line-height: 24px;
font-size: 14px;
padding: 6px 20px;
cursor: pointer;
transition: 1s all;
}
.bodyDiv .navs .navsLi>a,.navsLi .sonnavsLi a{
color: #fff;
}
.bodyDiv .navs .navsLi:hover>a, .sonnavsLi:hover>a{
color: #00c1de;
}
.bodyDiv .navs .navsLi:hover .sonSlide{
display: block;
position: fixed;
left: 201px;
width: 195px;
border: 1px solid white;
height: 325px;
top: 42px;
background: #272b2e;
transition: 1s all;
}
.sonnavsLi:hover .sonSlide1{
display: block;
position: fixed;
left: 396px;
width: 600px;
border: 1px solid white;
height: 325px;
top: 42px;
background: #272b2e;
transition: 1s all;
}
.sonnavsLi .sonSlide1{
display: none;
}
.bodyDiv .navs .navsLi .sonSlide{
display: none;
}
.bodyDiv .navs .navsLi .sonnavs .sonnavsLi .smallnavs{
border: 1px solid deepskyblue;
position: absolute;
left: 100px;
top: 0px;
display: none;
}
.bodyDiv .navs .navsLi .sonnavs .sonnavsLi .smallnavs .smallnavsLi{
}
.slide{
position: relative;
width: 200px;
left: -210px;
transition:.3s all;
background: #272b2e;
border: 1px solid white;
top: 10px;
}
.topnav:hover .slide{
left: -11px!important;
}
.bodyDiv .navs,.bodyDiv .navsLi,.bodyDiv .navsLi a{
background: transparent;
}
.sonnavs1 .sonnavsLi1 {
display: inline-block;
width: 20%;
height: 60px;
line-height: 60px;
font-size: 14px;
padding: 6px 2px;
border-bottom: 1px solid #fff;
background: rgba(128, 128, 128, 0.16);
}
.sonnavs1 .sonnavsLi1 .test .sonnavsLi2{
display: block;
height: 24px;
line-height: 24px;
font-size: 14px;
padding: 6px 20px;
}
</style>
</head>
<body>
<div class="topmenus">
<div class="topnav" onclick="menuShows()">菜单
<div class="slide bodyDiv">
<ul class="navs">
<li class="navsLi">
<a href="#">首頁</a>
</li>
<li class="navsLi">
<a href="#">新闻动态</a>
<div class="sonSlide">
<ul class="sonnavs">
<li class="sonnavsLi">
<a href="#">行业新闻</a>
</li>
<li class="sonnavsLi">
<a href="#">动态新闻</a>
</li>
</ul>
</div>
</li>
<li class="navsLi">
<a href="#">成功案例</a>
</li>
<li class="navsLi">
<a href="#">画册中心 ></a>
<div class="sonSlide">
<ul class="sonnavs">
<li class="sonnavsLi">
<a href="#">pt系列画册 ></a>
<div class="sonSlide1">
<ul class="sonnavs1">
<li class="sonnavsLi1">
<a href="#">山水画</a>
<ul class="test">
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
</ul>
</li>
<li class="sonnavsLi1">
<a href="#">风景画</a>
<ul class="test">
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
</ul>
</li>
<li class="sonnavsLi1">
<a href="#">人物画</a>
<ul class="test">
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
</ul>
</li>
<li class="sonnavsLi1">
<a href="#">写实画</a>
<ul class="test">
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
<li class="sonnavsLi2">
<a href="#">风景画</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="sonnavsLi">
<a href="#">cvi系列画册</a>
</li>
</ul>
</div>
</li>
<li class="navsLi">
<a href="#">服务支持</a>
<div class="sonSlide">
<ul class="sonnavs">
<li class="sonnavsLi">
<a href="#">戴阳pt系列</a>
<ul class="smallnavs">
<li class="smallnavsLi">
<a href="#">公共广播</a>
</li>
<li class="smallnavsLi">
<a href="#">室内扩声</a>
</li>
<li class="smallnavsLi">
<a href="#">专业音响</a>
</li>
<li class="smallnavsLi">
<a href="#">物联导览</a>
</li>
</ul>
</li>
<li class="sonnavsLi">
<a href="#">cvi系列</a>
</li>
</ul>
</div>
</li>
<li class="navsLi">
<a href="#">关于我们</a>
<div class="sonSlide">
<ul class="sonnavs">
<li class="sonnavsLi">
<a href="#">企业介绍</a>
</li>
<li class="sonnavsLi">
<a href="#">公司资质</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var bodyDiv=document.querySelector('.bodyDiv');
var queryDiv=document.querySelector('.topnav');
let keyCase=false;
function menuShows() {
keyCase=!keyCase;
if(keyCase){
bodyDiv.style.left='0px'
}else{
bodyDiv.style.left='-210px'
}
}
</script>
</body>
</html>
