본문으로 바로가기

[Axure 강좌] Sticky 메뉴 만들기

category 프로토타입 툴 Axure/기초강좌 2016.09.05 13:33

Axure로 "스티키 메뉴" 제작하는 방법에 대한 문의가 있어 관련 내용 공유드립니다.

  • 샘플 사이트 : 하나투어 쿠폰존
  • 인터랙션 확인방법 : 사이트 접속 후 아래로 스크롤하면 빨간색 메뉴가 상단에 고정되고, 위로 스크롤하면 고정 메뉴가 해제됩니다.


Axure Prototype

Axure로 스티키 메뉴를 제작하는 기본 원리는 상단 고정 메뉴를 다이너믹 패널로 만들어서 Hidden 처리했다가, 브라우저가 기준 좌표 이상 스크롤 되었을때 Show하는 방식입니다.

  • 제작시간 : 10분


제작방법

#1. UI 그리기

하나투어 쿠폰존 사이트를 참고하여 기본 UI를 그립니다.


#2. Sticky 메뉴 제작

  1. 메뉴 영역을 [복사] [붙여넣기]로 하나 더 만들고, 새로 만든 메뉴를 다이너믹 패널로 변환합니다.
  2. 새로 만든 다이너믹 패널의 이름을 '스티키 메뉴'로 지정하고, 좌표(0,0) 위치로 이동시킵니다.
  3. 다이너믹 패널이 브라우저 상단에 고정될 수 있도록 Pin To Browser 옵션을 체크합니다.
  4. 스크롤이 발생하기 전에는 다이너믹 패널이 보이지 않도록 Hidden 체크합니다.


#3. 윈도우 스크롤 인터랙션 적용

  1. 위에서 Hidden 체크한 '스티키 메뉴'가 Show 되는 Y좌표의 위치 값을 계산합니다.
  2. OnWindowScroll 인터랙션의 조건을 설정합니다.
    - if "[[Window.scrollY]]" is greater than or equals "512" Show 스티키 메뉴
    - Else If True Hide 스티키 메뉴


#4. 페이지와 스티키 메뉴 센터 정렬하기

  1. 페이지의 빈화면 클릭 후 스타일 탭에서 Page Alignment > Align Center 아이콘 클릭
  2. '스티키 메뉴' 클릭 후 Pint To Broswer 옵션에서 Horizontal Pin을 Center로 선택

Axure 공식 강좌 수강생은 페이스북 그룹을 통해 상세설명이 포함 된 동영상과 완료 파일을 다운받으실 수 있습니다.


신고
웹기획자 조영수
여행 카테고리 서비스 기획자. 《처음부터 다시 배우는 웹 기획》 저자. 웹기획&AXURE 강사. 웹/모바일 기획자 그룹 운영자.

댓글을 달아 주세요

  1. 이수민 신고">2016.09.06 19:38 신고

    axure 공부하는데 많은 도움이 됩니다. 감사합니다!

  2. 초보자 신고">2016.09.12 14:26 신고

    2.OnWindowScroll 인터랙션에 조건을 넣는 방법을 모르겠군요..
    page interactions에서 더블클릭하고 들어가면 직접 입력하는 에디터가 나오지 않는데요 ^^

    • BlogIcon 웹기획자 조영수 신고">2016.09.12 14:30 신고

      모바일이라 간단히 답변 드립니다. 직접 입력하는 조건은 인터랙션 우측 상단에 edit 버튼이 있는데요. 해당 버튼을 클릭하면 직접 조건을 설정하실 수 있습니다. ^^

      -

      다시 확인해보니 edit 버튼이 아니고, Add Condition 버튼입니다.

  3. 기획꿈나무 신고">2016.09.23 09:41 신고

    한글로 된 참고서적이 있을까요?

    • BlogIcon 웹기획자 조영수 신고">2016.09.23 09:46 신고

      꿈나무님 안녕하세요.

      한글로 된 참고서적은 출간되지 않았습니다. 대신, 아래 사이트 접속해서 Axure로 검색해보시면 영어로 된 Ebook을 다운로드 받으실 수 있습니다. ^^

      http://it-ebooks.info/

  4. 2016.09.28 14:56

    비밀댓글입니다