CSS动画实现菜单栏从左边滑出

时间:2022-01-19 21:08:28

盗用一下图片吧:实际效果图如下:

CSS动画实现菜单栏从左边滑出

1,有一个nav的侧边栏,有一个遮罩层,随着侧边栏打开,然后点击遮罩层关闭侧边栏

关键代码:

1.给slideNav(侧边栏设置如下属性)

 .slideNav {
position: absolute;
left: -7rem;
top:;
width: 7rem;
height: 100%;
background: #555;
transition: left linear .3s;
}

2.当点击显示菜单按钮的时候:

  btn.addEventListener('click', function () {
mask.style.display = 'block';
nav.style.left = 0;
}, false);

3,当点击mask遮罩层:--菜单划出

  mask.addEventListener('click', function () {
mask.style.display = 'none';
nav.style.left = '-7rem';
}, false)