부드럽게 나타나고 숨겨지는 사이드바

CSS

#sidebar { font-size: 14px; z-index: 100; 
-webkit-transform: translate3d(-300px,0,0);
-moz-transform: translate3d(-300px,0,0);
transform: translate3d(-300px,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
html.open #sidebar { overflow-y: auto;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#sidebar-toggle { display: block; position: fixed; left: 10px; bottom: 10px; width: 50px; height: 50px; line-height: 55px; text-align: center; color: #555; background-color: #f1f1f1; border-radius: 10px; opacity: 0.9; box-shadow: 0 0 10px #aaa; z-index: 101; }

jQuery

$("#sidebar-toggle").click(function(){
  $("html").toggleClass("open");
});

HTML

<div id="sidebar">
    content
</div>
<div id="sidebar-toggle">사이드바 열기</div>

메모

단순히 transition 를 써서 left 나 margin-left 를 이동시키기 보다, transform: translate3d(x,y,z) 를 쓰는게 더 부드럽게 움직인다

본문에 대해 문의가 있으신 분은 post@wallel.com로 이메일 보내주세요.
본문 외에 추가 문의 사항은 문의하기를 통해주시기 바랍니다.