개요
Axure RP로 모바일에서 자주 쓰이는 슬라이딩 메뉴 만드는 방법을 알아보겠습니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
설정
예제 파일 중, Sliding Menu 페이지를 엽니다. 캔버스에는 두 개의 위젯 세트가 있습니다. 왼쪽 세트는 Prototype UI이고, 오른쪽 세트는 슬라이딩 메뉴입니다.
캔버스에서 Sliding Menu 그룹을 선택하고 위치를 (0,0)으로 이동시킵니다. 그리고 STYLE 탭에서 Hidden에 체크합니다.
햄버거 아이콘으로 슬라이딩 메뉴 표시하기
왼쪽의 Outline 패널에서 hamburger sliding menu button을 선택하고 PROPERTIES 탭에서 OnClick을 더블 클릭하여 케이스를 추가합니다.
Case Editor에서 Show를 선택하고 Configure actions에서 Sliding Menu에 체크합니다. Animate 드롭다운 메뉴에서 slide right를 선택하고, t 필드에 400이라고 입력합니다. OK를 눌러 저장합니다.
Back 버튼으로 슬라이딩 메뉴 숨기기
캔버스에서 Sliding Menu 그룹 중 상단 왼쪽에 있는 화살표 아이콘을 선택합니다. 그리고 PROPERTIES 탭에서 OnClick을 더블클릭하여 케이스를 추가합니다.
Case Editor에서 Hide를 선택하고 Configure actions에서 Sliding Menu에 체크합니다. Animate에서 sliding left를 선택하고 t 필드에 400이라고 입력합니다. OK를 눌러 저장합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.