<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/*//主体*/
body{
transition: all 0.2s ease-in-out;
}
/*//class=active的标签生效*/
body.active{
transform: translate3d(150px,0,0);
transition: all 0.2s ease-in-out;
}
.page-title{
margin: 0;
}
.header,.footer{
position: fixed;
left: 0;
right: 0;
text-align: center;
height: 44px;
line-height: 44px;
z-index: 1;
}
.header{
border-bottom: 1px solid #e73068;
top:0;
}
.header .btn-slide-bar{
width: 44px;
height: 44px;
float: left;
cursor: pointer;
line-height: 2.8;
}
/*三道横杠::before加box-shadow实现*/
.header .btn-slide-bar::before{
content: "";
width: 20px;
height: 2px;
background-color: #999;
display: inline-block;
box-shadow: 0 7px 0 #999, 0 -7px 0 #999;
}
.wraper-page{
position: absolute;
top:44px;
right: 0;
bottom: 44px;
left: 0;
overflow: hidden;
}
.slide-bar{
position: absolute;
top: 0px;
bottom: 0px;
background-color: #333;
width: 150px;
left: 0;
z-index: 2;
transform: translate3d(-150px,0,0);
transition: all 0.2s ease-in-out;
height: 500px;
}
.slide-bar li{
padding-left: 10px;
height: 40px;
line-height: 40px;
text-align: left;
color: #fff;
border-bottom: 1px solid #222;
}
</style>
<body>
<!-- 代码部分begin -->
<section class="wraper-page">
<header class="header">
<span class="btn-slide-bar"></span>
</header>
</section>
<section class="slide-bar">
<ul>
<li>首页</li>
<li>菜单导航</li>
<li>jQuery特效</li>
<li>CSS3特效</li>
<li>tab标签</li>
<li>bootstrap</li>
</ul>
<script>
// 原生js实现
document.addEventListener("DOMContentLoaded", function(){
(function(){
var _btn = document.querySelector(".btn-slide-bar"),
_body = document.querySelector("body");
_btn.onclick = function(){
_body.classList.toggle("active");
}
})(window)
},false);
</script>
</body>
</html>