移动端左侧导航栏效果如何做
大概思路就是设导航栏盒子为固定定位 fixed，初始宽度设为0，点击打开按钮调用函数设置宽度为有效值
具体步骤下面代码有解释
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>移动端左侧导航栏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 50px;
padding: 0 20px;
background-color: #000;
line-height: 50px;
}
.side-nav {
position: fixed;
overflow-x: hidden; /*水平方向溢出隐藏*/
z-index: 9; /*堆叠顺序，让导航栏在最前面显示*/
top: 0;
left: 0; /*改成 right=0 即右侧打开*/
height: 100%;
width: 0; /*初始隐藏，即宽度为0*/
padding-top: 60px;
background-color: #000;
transition: 0.5s; /*动画过渡时间，这里只是最简单的用法*/
}
.container {
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
}
</style>
</head>
<body>
<div class="nav">
<button onclick="openNav()">打开</button>
</div>
<div class="side-nav" id="side-nav"></div>
<div class="container" onclick="closeNav()"></div>
<script>
// 设置侧栏宽度并让外面大盒子关闭的事件使用捕获传递
function openNav() {
document.getElementById("side-nav").style.width = "50%";
}
// 使侧栏宽度为0，即关闭
function closeNav() {
document.getElementById("side-nav").style.width = "0";
}
</script>
</body>
</html>下面是演示
```
name: Wayne's blog
link: https://wrans.top
avatar: https://cdn.staticaly.com/gh/wayne0926/myphoto@master/img/avatar.jpg
descr: 以梦为马，不负韶华。
```
信息如下：
站点名称：小陈博客
站点描述：理想成为大牛的小陈同学
站点网址：https://reinness.com
站点图片：https://qiniu.reinness.com/avatar.png
作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下，你只需要简单填写一下表单申请即可，我们会给作者提供包括流量、云服务器等，另外还有些周边礼物。