기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

오늘은 Axure에서 서랍 메뉴를 사용하는 방법을 보여드리겠습니다. 서랍 메뉴에서는 다음과 같은 두 가지 대화형 효과를 구현해야 합니다.

상호작용 1

서랍 메뉴의 레벨 1 및 레벨 2 메뉴 항목의 크기 조정 효과

구현 논리: 동적 패널의 전환 상태 설정 및 "원본 밀기/당기기" 구현

상호작용 2

메뉴 항목의 선택된 상태 전환

로직 구현: 보조 보기에서 선택한 상태를 설정합니다.

구현 단계를 살펴보겠습니다.

상호 작용 1: 서랍 메뉴의 레벨 1 및 레벨 2 메뉴 항목 크기 조정 효과

1 단계

1. 동적 패널을 드래그하여 동적 패널의 크기를 조정하세요.

2. 동적 패널을 두 번 클릭하고 동적 패널의 이름을 "메뉴 1"로 설정하고 각각 이름이 접힌 2개의 동적 패널 상태를 추가합니다. 축소, 확장

2 단계

1. 접힌 상태를 두 번 클릭하여 "접힌" 상태 페이지로 들어갑니다.

2. 직사각형을 페이지로 드래그하고 이름을 "메뉴 1-접기"로 설정합니다. 메뉴 1의 크기를 조정하고 "메뉴 1"이라는 텍스트를 입력합니다.

3. 드롭다운 화살표 이미지를 드래그하여 크기를 조정하세요.

3단계

"메뉴 1-접기"의 마우스 오버 및 선택 스타일을 추가하고 글꼴 색상: 파란색과 채우기 색상: 밝은 회색을 각각 설정합니다.

4단계

"메뉴 1-접기" 직사각형의 마우스 클릭을 설정할 때 사용 사례:

"패널 상태 전환" 작업을 선택하고 "메뉴 1"을 "확장" 상태로 전환하도록 설정한 다음 "구성요소 밀기/당기기" 속성을 선택합니다.

5단계

1. 동적 패널의 '접힌' 상태 내용을 '펼친' 상태 페이지에 복사합니다.

2. "확장" 상태 페이지에서 직사각형 이름을 "메뉴 1-확장"으로 변경합니다.

상호작용 2: 메뉴 항목의 선택된 상태 전환

6단계

1. "Menu 1-Expand"를 하위 메뉴로 복사하고 이름 구성 요소의 텍스트를 수정한 후 이름을 Submenu 1로 지정합니다.

2. 하위 메뉴 1의 마우스 클릭 이벤트를 설정하고 "선택 항목 설정" 동작을 선택한 후 현재 구성 요소가 선택되도록 구성합니다.

7단계

1. 여러 하위 메뉴를 일괄 복사하고 텍스트를 수정한 후 각각 이름을 지정합니다.

2. 여러 하위 메뉴를 모두 선택한 후 선택 그룹 이름을 설정합니다: 1

효과를 보려면 미리 보세요.