<div class="wrap">
<div class="menu"></div>
<div class="main">
<div class="header"></div>
<div class="content"></div>
</div>
</div>
.wrap{
display:flex;
}
.main{
width:100%;
transition:all .5s;
}
.header{
height: 50px;
background:pink;
}
.content{
height: 200px;
background:green;
}
.menu{
height: 250px;
width: 270px;
position: absolute;
top:0;
bottom:0;
transform:translateX(-270px);
background:red;
transition:all .5s;
}
.active{
transform:translateX(0px);
}
$(document).ready(function(){
$('.header').click(function(){
$('.menu').toggleClass('active');
})
})
External CSS
This Pen doesn't use any external CSS resources.