웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UX Planner & Designer


웹을 통해 새로운 창조를 꿈꾸는 인간
Humans dreaming of new creation through the web
WEBDESK
Web Standard
HOME WEBDESK Web Standard
사이드 메뉴 슬라이딩 방식-Multi-Level Push Menu
Posted by kimdirector | 2015.07.15 | Hit : 3273
목록보기이전보기
요즘 홈페이지에서 또는, 모바일 웹, 어플리케이션에서 많이 활용되도 있는 사이드 메뉴 구현방식입니다. 활용도가 높은 만큼 트렌드라고 할 수 있겠죠.


우측의 오픈메뉴 버튼을 클릭하면 좌측에 사이드메뉴 출력 가능한 리소스입니다.
3단계까지 펼쳐지는 사이드 메뉴이고 하부메뉴로 이동할 때마다 이전 메뉴 위에 겹쳐져서 출력되는 형태입니다.
 
총 3가지로 출력되는 방식이며, 모바일 웹에서 또는 어플리케이션, 모두 사용 가능한 리소스입니다.
참고하여 응용하면 멋진 홈페이지가 될 수 있을 것 같습니다.
 
총 3가지 타입이 있습니다.
 

상위레벨의 메뉴가 밀려나는 형태


상위메뉴를 덮고 백링크가 출력되는 형태


위의 두가지를 합친 형태가 있습니다.

 
해당 리소스는 아래 링크에서 해당 사이트로 이동 후 다운받으시기 바랍니다.
 
해당 홈페이지에서는 활용 방식이나 설명이 자세하게 되어 있으니, 어렵지 않게 구현할 수 있습니다.
 
홈페이지에 가시면 여느 사이트와 같은 방식으로 데모도 볼 수 있으니 참고하시기 바래요.
리소스 관련된 질문은 받지 않겠습니다. 저도 아직 활용해 보지 않아서요. 관련 질문은 해당 리소스 화면에서 하시면 될 듯 해요.
Posted by kimdirector | 2015.07.15 | Hit : 3273
Origin http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/
Tags 모바일웹 어플리케이션 사이드 메뉴
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=116

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Tags
인포그래픽 프로모션 iOS 6 전략 iOS 9 디자인 디자인 소스 CIP Design 프로젝트 인재 웹표준 공통점 iPad 트위터 포트폴리오 로고 Homepage 네이버 에버노트 접근법 사업계획서 Adobe 남규리 애플리케이션 솔루션 플랫폼 모바일 포트폴리오 HTML5 시안 UI 패러다임 브랜드 기업 무료 Typography 사용성 소모량 프리젠테이션 소프트웨어뱅크 디자인 Codepen iPhone 아이폰 경험 이벤트 인터렉티브 무료 CSS UI Kit 리소스 아이디어 소셜 타이포잔치 2013 B2B 기획 사업아이템 아이덴티티 크롬 마크업 UX 아이패드
Tags
SSD 앱스토어 디자인 홈페이지 UX 개발자 그림 프로그램 웹브라우저 브라우저 에버노트 Tutorial isTallk 웹사이트 메일폼 포트폴리오 모바일 브랜드 폰트 레이어 플래시 마케팅 드롭박스 로고디자인 무료 전략 스마트폰 사용자 경험 조직문화 로고 이벤트 CIP 가비아 애드웨어 생산성 디자인 본고딕 아이콘 파워포인트 최적화
Category Cloud
About us Review Portfolio Design Review 
Leaders Story Mobile UXD IT Information
Web Identity Everyday Story Mobile Life
Webdesign Report Web Standard Homepage Work
Web Plan Report Practical Use Tip Design Inspiration
Dowmload Review Recommend Site
Search
Contact us
Phone : 010-8555-0503
E-mail : kimdirector@gmail.com