이 튜토리얼에서는 간단한 버튼 네비게이션과 드롭다운 네비게이션의 구축 단계를 거쳐 멀티 레벨 네비게이션을 구축하는 방법을 소개합니다. 이 튜토리얼은, 전체 작업을 따라하셔도 되고, 필요한 부분까지만 활용하셔도 상관 없습니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2Fb7f1dea2-bb09-486f-b8a1-1302dc298f72_08-multilevelpreview.mp4

→ 이 튜토리얼에서 설명하는 디자인을 .uxp 파일로 다운받아 참고하실 수 있습니다.

디자인 설정

1. 먼저 빠른 도구 메뉴에서 Box (상자) 요소를 사용하여 네비게이션 바를 만드는 것부터 시작합니다.
2. 탐색 모음에 Box (상자) 요소를 배치하고 Box (상자)에 텍스트 요소를 추가합니다. 카테고리 이름을 입력합니다.
3. Box (상자) 요소와 텍스트 요소를 그룹화합니다.

간단한 버튼 네비게이션

1. 그룹을 선택한 상태에서 상단 메뉴의 Add State (스테이트 추가)를 클릭합니다. 이제 State 1 (base)이 작성되었습니다. 두 번째 상태를 만들고 이름을 Hover (호버)라고 하고, Enter 키를 클릭합니다.
2. 호버 스테이트에서는 콘텐츠의 디자인(채우기 색상과 불투명도)을 변경하여 호버 효과를 만듭니다.

인터랙션 추가

1. 메뉴 카테고리 그룹을 선택하고 속성 패널 상단의 +를 클릭하여 새 인터랙션을 추가합니다.
2. Trigger (트리거)에서 Hover (호버)를 선택합니다.
3. Action (액션) 섹션에서 Set State (스테이트 지정)를 선택합니다.
4. Element (요소)에서 원하는 카테고리 그룹을 선택합니다.
5. Set State (스테이트 지정)에서 Hover (호버)를 선택합니다.
6. Add (추가)를 클릭합니다.