canvas off - left sidebar

with transform translateX special for 1po.st

by Dan Shahin

HTML

<div class="layout">
    <div class="content">
        Lorem Ipsum is simply dummy text of 
        the printing and typesetting industry. 
        Lorem Ipsum has been the industry's 
        standard dummy text ever since the 1500s, 
        when an unknown printer took a galley 
        of type and scrambled it to make a type 
        specimen book. 
    </div>
    <div class="sidebar">sidebar</div>
</div>

CSS

.layout{
    background: #eee;
    position: relative;
    overflow: hidden;
}
.layout .content{
    padding: 10px;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}
.layout .sidebar{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    background: #aaa;
    width: 100px;
    position: absolute;
    left: -100px;
    top: 0;
    bottom: 0;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}
.layout.open .content,
.layout.open .sidebar{
    -moz-transform: translateX(100px);    /* Для Firefox */
    -ms-transform: translateX(100px);     /* Для IE */
    -webkit-transform: translateX(100px); /* Для Safari, Chrome, iOS */
    -o-transform: translateX(100px);      /* Для Opera */
    transform: translateX(100px);    
}

JavaScript

$('.content').on('click', function(){
    $('.layout').toggleClass('open');      
})