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 공식 강좌 수강생은 페이스북 그룹을 통해 상세설명이 포함 된 동영상과 완료 파일을 다운받으실 수 있습니다.
'프로토타입 툴 Axure > 기초강좌' 카테고리의 다른 글
| [Axure 강좌] Sticky 메뉴 만들기 (10) | 2016.09.05 |
|---|---|
| [Axure 강좌] Admin 내비게이션 만들기 (2) | 2016.08.30 |
| [Axure 강좌] 유튜브 동영상 embed 하기! (2) | 2016.01.26 |
| [Axure 강좌] 구글 지도 연동하기! (14) | 2016.01.23 |
| Axure 기초강좌 - Style 판넬 (0) | 2015.09.25 |
| Axure 기초강좌 - 마우스 오버, 마우스 이탈, 위젯 선택 시 스타일 적용 방법 (3) | 2015.09.18 |
axure 공부하는데 많은 도움이 됩니다. 감사합니다!
2.OnWindowScroll 인터랙션에 조건을 넣는 방법을 모르겠군요..
page interactions에서 더블클릭하고 들어가면 직접 입력하는 에디터가 나오지 않는데요 ^^
한글로 된 참고서적이 있을까요?
비밀댓글입니다
안녕하세요. 툴 구입하여 연습중인데요...도움이 필요합니다.
"2.OnWindowScroll 인터랙션의 조건을 설정합니다."에서 다른 것은 입력했는데요.
"Show 스티키 메뉴"를 입력하는 방법을 모르겠습니다.
도와주세요. ^^