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

时间：2024-02-23 12:53:32

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

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

关键代码：

1.给slideNav（侧边栏设置如下属性）

1 .slideNav {
2             position: absolute;
3             left: -7rem;
4             top: 0;
5             width: 7rem;
6             height: 100%;
7             background: #555;
8            transition: left linear .3s;
9         }

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

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

3，当点击mask遮罩层：--菜单划出

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

 

相关文章