[Axure 강좌] Sticky 메뉴 만들기
2016. 9. 5. 13:33ㆍ프로토타입 툴 Axure/기초강좌
Axure로 "스티키 메뉴" 제작하는 방법에 대한 문의가 있어 관련 내용 공유드립니다.
- 샘플 사이트 : 하나투어 쿠폰존
- 인터랙션 확인방법 : 사이트 접속 후 아래로 스크롤하면 빨간색 메뉴가 상단에 고정되고, 위로 스크롤하면 고정 메뉴가 해제됩니다.
Axure Prototype
Axure로 스티키 메뉴를 제작하는 기본 원리는 상단 고정 메뉴를 다이너믹 패널로 만들어서 Hidden 처리했다가, 브라우저가 기준 좌표 이상 스크롤 되었을때 Show하는 방식입니다.
- 제작시간 : 10분
-
Preview : http://qbpyne.axshare.com/home.html
제작방법
#1. UI 그리기
하나투어 쿠폰존 사이트를 참고하여 기본 UI를 그립니다.
#2. Sticky 메뉴 제작
- 메뉴 영역을 [복사] [붙여넣기]로 하나 더 만들고, 새로 만든 메뉴를 다이너믹 패널로 변환합니다.
- 새로 만든 다이너믹 패널의 이름을 '스티키 메뉴'로 지정하고, 좌표(0,0) 위치로 이동시킵니다.
- 다이너믹 패널이 브라우저 상단에 고정될 수 있도록 Pin To Browser 옵션을 체크합니다.
- 스크롤이 발생하기 전에는 다이너믹 패널이 보이지 않도록 Hidden 체크합니다.
#3. 윈도우 스크롤 인터랙션 적용
- 위에서 Hidden 체크한 '스티키 메뉴'가 Show 되는 Y좌표의 위치 값을 계산합니다.
- OnWindowScroll 인터랙션의 조건을 설정합니다.
- if "[[Window.scrollY]]" is greater than or equals "512" Show 스티키 메뉴
- Else If True Hide 스티키 메뉴
#4. 페이지와 스티키 메뉴 센터 정렬하기
- 페이지의 빈화면 클릭 후 스타일 탭에서 Page Alignment > Align Center 아이콘 클릭
- '스티키 메뉴' 클릭 후 Pint To Broswer 옵션에서 Horizontal Pin을 Center로 선택
Axure 공식 강좌 수강생은 페이스북 그룹을 통해 상세설명이 포함 된 동영상과 완료 파일을 다운받으실 수 있습니다.
반응형