페이스북 같은 앱에서 사용하는 좌/우측 스라이딩 사이드 메뉴를 Angular.js 기반으로 만들어진 컴포넌트에 대해 알아보자.
Angular-Snap.js
- http://jtrussell.github.io/angular-snap.js/
- 드래그하여 메뉴를 열수 있다
- 버튼 클릭으로 메뉴를 열수 있다
- IE8 지원하나 snap.js 가 IE8 미지원이므로 미지원
Angular-SlideNav
- https://github.com/sthomp/angular-slidenav.js
- 버튼 클릭으로 메뉴를 열수 있다
- IE8 미지원
jPanelMenu
- jQuery 기반 메뉴
- IE8 ?
Sidr
- http://www.berriart.com/sidr/
- left, right 슬라이딩 메뉴
- IE8 지원
Nexus Style Side
- http://www.jqueryscript.net/menu/Google-Nexus-Page-Like-Sidebar-Menu-with-CSS3-javascript.html
- 작은 아이콘에서 큰 아이콘과 텍스트가 펼치는 효과 (강추)
- IE8 미지원
Multi-Level Side Menu
- 또 다른 멀티 레벨 메뉴 (강추) : 메뉴로 사용하기 괜찮음
- IE8 미지원
Blueprint Side
- http://tympanus.net/Blueprints/SlidePushMenus/
- 왼쪽, 오른쪽, 위, 아래로 메뉴가 펼쳐진다
- 스타일은 푸른색
- IE8 지원
MMenu
- 또 다른 jQuery MMenu (강추)
- 모바일에 잘 맞는 슬라이딩 메뉴
- 다른 컴포넌트도 있음
- IE8 미지원
Tegansnyder
- https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu
- jQuery Mobile Slide Menu : 페이스북 형태
- 페이스북과 유사한 Slide Menu 만들기 블로그 : 이것이 좀 더 괜찮음
- IE8 지원
Snap.js
- https://github.com/jakiestfu/Snap.js
- left, right 메뉴 제공
- 드래그 제공
- 페이스북 스타일 제공
- IE8, 9 미지원
Meny
- IE8 지원
<참조>
- 원문 : Slide Out Sidebar Navigations
- 원문 : jQuery Side Menu 목록
'HTML5, CSS3 > jQuery' 카테고리의 다른 글
[jQueryUI] AngularJS Way로 만들기 - 3 (0) | 2013.11.12 |
---|---|
[jQueryUI] jqGrid 사용하기 - 2 (0) | 2013.11.12 |
[jQueryUI] 기본 개념 및 사용하기 - 1 (0) | 2013.11.12 |
[구글] 10가지 디자인 원칙 (0) | 2013.06.03 |
[jQuery] stopPropagation, preventDefault, return false 간의 차이점 (0) | 2013.03.20 |