<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>响应式菜单切换效果</title>
<link rel="stylesheet" href="./css/menu.css" />
</head>
<body>
<div class="menu">
<div class="sub-menu">
<div class="logo">logo</div>
<div class="toggle-menu">
<ul class="toggle">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="sub">
<li>
<span>导航父菜单1</span>
<ul class="child-menu">
<li>导航子菜单1-1</li>
<li>导航子菜单1-2</li>
<li>导航子菜单1-3</li>
</ul>
</li>
<li>
<span>导航父菜单2</span>
<ul class="child-menu">
<li>导航子菜单2-1</li>
<li>导航子菜单2-2</li>
<li>导航子菜单2-3</li>
</ul>
</li>
<li>
<span>导航父菜单3</span>
<ul class="child-menu">
<li>导航子菜单3-1</li>
<li>导航子菜单3-2</li>
<li>导航子菜单3-3</li>
</ul>
</li>
<li>
<span>导航父菜单4</span>
<ul class="child-menu">
<li>导航子菜单4-1</li>
<li>导航子菜单4-2</li>
<li>导航子菜单4-3</li>
</ul>
</li>
<li>
<span>导航父菜单5</span>
<ul class="child-menu">
<li>导航子菜单5-1</li>
<li>导航子菜单5-2</li>
<li>导航子菜单5-3</li>
</ul>
</li>
<li>
<span>导航父菜单6</span>
<ul class="child-menu">
<li>导航子菜单6-1</li>
<li>导航子菜单6-2</li>
<li>导航子菜单6-3</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="banner">Banner</div>
</body>
<script>
(function(){
document.querySelector('.menu .toggle').onclick = function (e) {
e.stopPropagation();
this.classList.toggle('active');
let menu = document.querySelector('.sub');
menu.classList.toggle('on');
};
let subMenu = document.querySelectorAll('.sub > li');
for (let i = 0, len = subMenu.length; i < len; i++) {
(function (b){
subMenu[b].onclick = function (e) {
e.stopPropagation();
// document.querySelector('.child-menu.on') && document.querySelector('.child-menu.on').classList.remove('on');
for (let j = 0, lenj = subMenu.length; j < lenj; j++) {
if (j !== b) {
document.querySelectorAll('.child-menu')[j].classList.remove('on');
}
}
this.querySelector('.child-menu').classList.toggle('on');
}
})(i);
}
document.onclick = function () {
console.log(document.querySelector('.menu .toggle'));
document.querySelector('.menu .toggle').classList.contains('active') && document.querySelector('.menu .toggle').click();
document.querySelector('.child-menu.on') && document.querySelector('.child-menu.on').classList.remove('on');
}
})();
</script>
</html>
* {
margin: 0;
padding: 0;
user-select: none;
}
li {list-style:none;}
.banner {
height:300px;
background:red;
clear:both;
margin:0 auto;
font-size:30px;
text-align:center;
color:#fff;
line-height:300px;
}
.menu {
position:relative;
z-index:999;
width:1200px;
height:40px;
margin:0 auto;
}
.menu .logo {
float:left;
height:40px;
width:100px;
color:#fff;
font-size: 20px;
text-align:center;
line-height:40px;
background:blue;
}
.menu .sub {
display:block;
float:right;
height:40px;
}
.menu .sub.on{
display:block;
}
.menu .toggle-menu {
display:none;
float:right;
}
.menu .sub > li {
float:left;
width: 150px;
text-align:center;
background:#ccc;
}
.menu .sub>li span{
display:block;
height:40px;
line-height:40px;
}
.menu .sub>li ul {
height:0;
transition: all 2s;
overflow: hidden;
background:#eee;
}
.menu .sub>li ul.on {
height: auto;
transition: all 2s;
}
.menu .sub>li ul li {
height:40px;
line-height:40px;
}
/* .menu .sub>li:hover ul{
height: auto;
transition: all 2s;
} */
.menu ul.toggle li {
height: 2px;
width: 35px;
background: blue;
margin-bottom: 10px;
list-style: none;
transition: all .2s;
opacity: 1;
}
.menu .active li:nth-of-type(2) {
opacity: 0;
}
.menu .active li:nth-of-type(1) {
transform: translateY(12px) rotate(45deg);
}
.menu .active li:nth-of-type(3) {
transform: translateY(-12px) rotate(-45deg);
}
@media screen and (max-width: 768px) {
.menu {
width: 100%;
box-shadow: 0 1px 2px #eee;
}
.menu .sub {
display: none;
width:100%;
}
.menu .sub>li {
width: 100%;
border-bottom:1px solid #eee;
}
.menu .toggle-menu {
position:relative;
top:5px;
right:5px;
display: block;
}
}
