웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 3269
목록보기이전보기
요즘 홈페이지에서 또는, 모바일 웹, 어플리케이션에서 많이 활용되도 있는 사이드 메뉴 구현방식입니다. 활용도가 높은 만큼 트렌드라고 할 수 있겠죠.


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

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


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


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

 
해당 리소스는 아래 링크에서 해당 사이트로 이동 후 다운받으시기 바랍니다.
 
해당 홈페이지에서는 활용 방식이나 설명이 자세하게 되어 있으니, 어렵지 않게 구현할 수 있습니다.
 
홈페이지에 가시면 여느 사이트와 같은 방식으로 데모도 볼 수 있으니 참고하시기 바래요.
리소스 관련된 질문은 받지 않겠습니다. 저도 아직 활용해 보지 않아서요. 관련 질문은 해당 리소스 화면에서 하시면 될 듯 해요.
Posted by kimdirector | 2015.07.15 | Hit : 3269
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
개발자 모션 아이패드 홈페이지 디자이너 한컴 CEO 글꼴 디자인 날씨 디자인 UX 대쉬보드 안드로이드 마케팅 타이포그래피 모바일 네이버 iOS 웹사이트 브라우저 매니저 폰트 CIP 원칙 무료 이해 분석 경험 컬러 컨텐츠 인스타그램 무료 CSS UI Kit 리소스 아이패드 윈도우8 리더십 웹디자인 조합 무료 기획자 홈페이지 HTML5 프리젠테이션 iOS8 illustrator 브라우저 Button Design 자기계발 플립보드 UI 아이디어 전략 월간 APP 생각 접근성 속도 개인 Homepage 리더
Tags
관리자 사람 자질 Theme 전략 팬톤 아웃라인 스마트폰 솔루션 무료 HTML5 직함 경험 해외 서비스 디자인 사물인터넷 로고 속도 디자이너 벡터 아이콘 환경 웹아이덴티티 캐스캐이딩 한화 이글스 개발자 로고디자인 CSS 생각 유치원 홈페이지 저작권 퀄리티 무료 이미지 사이트 어플리케이션 웹사이트 기획 GUI 자바스크립트 Olive 홈페이지 모바일 웹앱 웹디자이너 홈페이지 통념
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