<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
overflow-x: hidden;
}
.sidebar {
-webkit-transition: all .3s ease-in-out;
}
.sidebar-toggle,
.wrap {
-webkit-transition: -webkit-transform .3s ease-in-out;
}
.sidebar-checkbox {
display: none;
}
.wrap {
padding: 50px 8px;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: -200px;
width: 200px;
background: gray;
}
.sidebar-toggle {
position: fixed;
top: 8px;
left: 8px;
width: 30px;
height: 30px;
border-radius: 3px;
}
.sidebar-toggle span,
.sidebar-toggle span:before,
.sidebar-toggle span:after {
position: absolute;
width: 20px;
height: 2px;
background: green;
}
.sidebar-toggle span {
top: 14px;
left: 5px;
}
.sidebar-toggle span:before {
content: '';
left: 0;
top: -7px;
}
.sidebar-toggle span:after {
content: '';
left: 0;
top: 7px;
}
#sidebar-checkbox:checked~.sidebar,
#sidebar-checkbox:checked~.sidebar-toggle,
#sidebar-checkbox:checked~.wrap {
-webkit-transform: translateX(200px);
}
#sidebar-checkbox:checked~.sidebar-toggle {
background: green;
}
#sidebar-checkbox:checked~.sidebar-toggle span,
#sidebar-checkbox:checked~.sidebar-toggle span:before,
#sidebar-checkbox:checked~.sidebar-toggle span:after {
background: white;
}
</style>
</head>
<body>
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
<div class="sidebar" id="sidebar">sidebar</div>
<div class="wrap">wrap</div>
<label for="sidebar-checkbox" class="sidebar-toggle">
<span></span>
</label>
</body>
</html>