实现抽屉侧边栏（主体移动）
效果： 
文章图片
代码：
【实现抽屉侧边栏（主体移动）】html：
css：
#all{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#ddd;
width:300px;
height:500px;
overflow:hidden;
}
#drawer{
position:absolute;
width:200px;
height:500px;
background:skyblue;
top:0;
left:-200px;
transition:all 0.5s;
}
#main{
position:absolute;
width:300px;
height:500px;
background:tomato;
top:0;
left:0;
transition:all 0.5s;
}
#nav{
height:50px;
background:yellow;
position:relative;
}
#open{
background:tomato;
width:35px;
height:35px;
position:absolute;
top:50%;
left:10px;
transform:translate(0,-50%);
cursor:pointer;
}
#mask{
display:none;
position:absolute;
width:300px;
height:500px;
top:0;
background:rgba(0,0,0,.5);
}
javascript：
var drawer = document.getElementById("drawer");
var main = document.getElementById("main");
var mask = document.getElementById("mask");
document.getElementById("open").onclick = function(){
drawer.style.left = 0;
main.style.left = 200 + "px";
mask.style.display = "block";
}
mask.onclick = function(){
drawer.style.left = -200 + "px";
main.style.left = 0;
mask.style.display = "none";
}
原理：对元素的left属性进行动态的调整，并且在主布局中利用overflow:hidden对超出部分进行隐藏
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM