개요
Axure RP로 아코디언 메뉴를 만드는 방법입니다. 아코디언 메뉴는 쉽게 말해 접혔다 펼쳤다 하는 메뉴를 의미합니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
설정
예제 파일 중 Accordion control 페이지를 엽니다. Accordion 1 그룹에서 Body 1 Item의 네 개 위젯을 모두 선택하고 마우스 우클릭한 후, Convert to Dynamic Panel을 선택합니다.
방금 만든 Dynamic Panel의 이름을 Body 1이라고 변경합니다.
스타일 탭에서 Hidden을 체크합니다.
이 프로세스를 Body 2 Item 및 Body 3 Item에도 반복하고 각각 이름을 Body 2, Body 3로 지정합니다.
Accordion 1, 2, 3 그룹의 위치를 이동하여 Header 1, Header 2, Header 3가 아래처럼 쭉 이어지게 붙입니다.
Accordion 인터랙션 주기
Accodion 1 그룹 안에 있는 Header 1을 선택합니다. PROPERTIES탭에서 OnClick을 더블클릭하여 OnClick 케이스를 추가합니다.
Toggle Visibility를 클릭하고, Body 1 Dynamic Panel에 체크합니다. Toggle이 선택되어 있는지 확인합니다. Push/Pull Widgets에 체크하고 Direction이 Below로 선택돼 있는지 확인합니다. OK를 눌러 저장합니다.
이 과정을 Body 2, Body 3 Dynamic Panel에도 반복합니다.
메뉴가 열릴 때 다른 메뉴는 접히게
Header 1을 선택하여 PROPERTIES탭에서 Case 1을 더블클릭하여 편집 화면으로 들어갑니다.
Hide를 클릭하고, Body 2 Dynamic Panel에 체크합니다. Hide가 선택되어 있는지 확인하고, Pull Widgets에 체크한 후, Below가 선택돼 있는지 확인합니다. Body 3 Dynamic Panel도 위와 마찬가지로 설정한 후 OK를 눌러 저장합니다.
Header 2와 Header 3에도 위와 동일한 과정을 각각 상대 Dynamic Panel에 반복합니다.
Preview
Preview 버튼을 눌러 정상 동작하는지 확인해 봅니다.