CSS3를 활용한 히든 메뉴 만들기

모바일 레이아웃에서 많이 활용되는 히든 레이어와 버거 아이콘입니다.

보통 jquery 의 animate를 이용해서 슬라이드되는 방식을 사용하는데

웹브라우저에서 구동되는 경우

네이티브앱에서의 그것만큼 부드럽게 되지는 않습니다.

jQuery의 easing 플러그인을 사용하면 어느 정도 해소는 될 것 같습니다만

좀 더 무거워지는 단점이 있죠.

단순히 버거 아이콘의 히든 레이어를 펼치기 위해 무거운 소스를 사용할 필요는 없잖아요.

그래서 이 번에 소개해드릴 소스는 CSS3의 transition, animation을 활용하는 방법입니다.

Demo

http://ralrariralra.dothome.co.kr/slidemenu/

먼저 위 페이지는 펼쳤다 닫혔다 하는 소스입니다.

Demo

http://ralrariralra.dothome.co.kr/slidemenu02/

이번에 소스는 부드럽게 펼쳤다 닫혔다 합니다.

css3를 지원하는 모바일기기에선 transition을 활용하면 하드웨어 가속을 할 수 있어서

아주 부드럽게 에니메이션 효과를 낼 수 있습니다..

참조

http://blog.naver.com/zmvk3967/220462904481

http://www.sudadot.com/bbs/bbs.php?mode=view&mid=board_LyRgk0&id=389162