侧边栏的滑进滑出效果

点击左上角用户头像，侧边栏快速滑出，然后单击右侧区域，侧边栏快速滑入。侧边栏悬浮在网页主体内容之上，通过position属性值为absolute实现该效果。接下来要将其隐藏，一般情况下绝对定位通过指定left和top来实现，此处只需要将left属性赋值为“元素宽度乘以负1”即可。

html结构分为主体、遮罩和侧边栏三个部分，遮罩和侧边栏默认隐藏。

<div class="body">
    <!--定义在左上角的头像-->
    <a href="#" class="avatar_small">
        <img src="images/avatar_small.jpg" />
    </a>

    <!--网页主体内容-->
    <div class="con">
        <img src="images/body.jpg" />
    </div>
</div>

<!--定义网页遮罩-->
<div class="mask">
</div>

<!--定义侧边栏容器-->
<div class="nav">
    <ul>
        <li>
            <a href="#"><img src="images/guest.jpg" /></a>
        </li>
        <li>
            <a href="#">我的课程</a>
        </li>
        <li>
            <a href="#">我的订单</a>
        </li>
        <li>
            <a href="#">我的收藏</a>
        </li>
        <li>
            <a href="#">个人中心</a>
        </li>
    </ul>
</div>

<style type="text/css">
html,body {
    width: 100%;
    height: 100%;
}
			
* {
    margin: 0;
    padding: 0;
}
			
.body a img {
    width: 10rem;
    height: 10rem;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
}
			
.body .con {
    width: 100%;
    height: 100%;
}
			
.body .con img {
    width: 100%;
    height: 100%;
}
			
.mask {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}
			
.nav {
    position: absolute;
    z-index: 11;
    left: -30rem;
    top: 0;
    width: 30rem;
    height: 100%;
    background-color: #555;
    transition: left linear 0.3s;
}
			
ul,li {
    list-style: none;
}
			
a {
    text-decoration: none;
}
			
.nav a {
    display: block;
    color: #eee;
    font-size: 2rem;
    padding: 1rem 0;
    text-align: center;
    border-bottom: 1px solid #888;
}
</style>

let btn = document.querySelector('.avatar_small');
let mask = document.querySelector('.mask');
let nav = document.querySelector('.nav');

//给用户头像、遮罩添加点击事件
btn.addEventListener('click', function() {
    mask.style.display = 'block';
    nav.style.left = '0';
})

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