实现一个点击菜单向右缓慢展开，点击关闭向左缓慢关闭的效果
<!-- html 代码 -->
<div class="top-bar">
<div class="meum">
<img class="meum-icon" src="./img/meum.png" alt="">
</div>
<div class="logo">
<img src="./img/logo.png" alt="">
</div>
<div class="profile">
<img src="./img/profile.png" alt="">
</div>
</div>
<div class="meum2">
<img class="close" src="./img/close.png" alt="">
<li><a href="#">简介</a></li>
<li><a href="#">业务</a></li>
<li><a href="#">人才</a></li>
<li><a href="#">社会责任</a></li>
<li><a href="#">合作案例</a></li>
<li><a href="#">投资者</a></li>
<li><a href="#">媒体</a></li>
</div>
// js 代码
const meumIcon = document.querySelector('.meum-icon');
const meum2 = document.querySelector('.meum2')
const close = document.querySelector('.close');
const aa = document.querySelectorAll('a');
meumIcon.addEventListener('click', () => {
// meum2.style.display = "block";
meum2.style.width = 290 + 'px';
for(let i=0; i<aa.length; i++) {
aa[i].style.display = 'block';
}
close.style.display = 'block';
})
close.addEventListener('click', () => {
// meum2.style.display = "none"
meum2.style.width = 0 + 'px';
for(let i =0; i<aa.length; i++) {
aa[i].style.display = 'none';
}
close.style.display = 'none';
})
/* css代码 */
body {
margin: 0;
padding: 0;
list-style-type: none;
/* position: relative; */
}
a {
text-decoration: none;
}
.top-bar {
height: 60px;
padding: 0 14px;
/* width: 100vm; */
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
/* flex-wrap: wrap; */
}
.logo img {
width: 73px;
height: 20px;
}
.meum img {
display: block;
height: 25px;
width: 20px;
}
.profile img {
height: 25px;
width: 25px;
}
.meum2 {
width: 0px;
background-color: #fff;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
/* display: none; */
transition: width 0.2s;
/* z-index: 999; */
}
.meum2 li {
height: 60px;
line-height: 60px;
text-align: center;
/* color: #ccc; */
font-size: 18px;
}
.meum2 li a {
color: #333;
display: none;
}
.meum2 .close {
display: none;
}
