메뉴리스트 위젯을 활용하여 페이지 일부분만 변경하기

시작에 앞서페이지의 일부분만 하위(서브)메뉴에 따라 변경되도록 사용해야할 경우가 있을 수 있습니다. 이를 위해 메뉴리스트 위젯을 활용하는 방법을 알아보겠습니다. 

기능 미리보기1) 메뉴리스트 이용 예시 보기에 접속하여, 페이지 가운데에 있는 [해석], [권한], [의무] 버튼을 눌러보세요.2) 페이지 디자인의 대부분은 그대로 있고, [해석], [권한], [의무]의 내용만 바뀌는 것을 확인할 수 있습니다.

하위메뉴에 메뉴리스트 위젯을 활용할 수 있도록 제작방법을 순서대로 알아보겠습니다. 

• 상위메뉴를 만들고 메뉴 복제를 이용하여 똑같은 디자인의 하위메뉴들을 만듭니다. 

• 메뉴를 드래그하여 하위메뉴 위치로 옮깁니다.  하위 메뉴 만드는 방법 자세히 알아보기

• 이 때 상위메뉴를 선택하면 하위메뉴가 바로 나타나도록 상위메뉴 설정에서 '접근 시 첫 번째 하위메뉴로 이동'을 선택합니다. 방법 : 디자인 모드 > (왼쪽 윗부분) 삼선 아이콘 클릭 > 상위메뉴 오른쪽 i 아이콘 클릭 > 접근 시 첫 번째 하위메뉴로 이동 선택 

• 첫 번째 하위메뉴 페이지에서 빈 섹션을 추가합니다.방법 : 디자인 모드 > 하위메뉴 페이지 > 우측 회색기둥 우클릭 > 빈 섹션추가 클릭

• 빈 섹션에 임의로 여백위젯을 추가합니다. 

• 우측 회색기둥을 우클릭하여 섹션 설정을 클릭합니다. 

• 섹션 설정 창에서 사이드 나누기, 사이드 섹션 고정 등을 선택합니다.

• 섹션 위에 나타나는 +아이콘을 클릭하거나 디자인 모드 왼쪽 윗부분의 + 아이콘을 눌러 메뉴리스트 위젯을 추가합니다. 

• 생성된 메뉴리스트를 우클릭하여 메뉴/카테고리 설정을 선택합니다.  

• 메뉴 리스트의 스타일은 다른 스타일을 눌러 선택합니다.

• 메뉴/카테고리 설정에서 기준위치를 상위메뉴로 하고, 메뉴의 크기, 너비, 텍스트 및 배경의 색깔, 메뉴에 마우스를 가져갔을 때(Hover)의 색상, 클릭했을 때(활성화)의 색상 등을 조절합니다.

• 이제 첫 번째 하위메뉴 페이지의 기본 골격을 잡았으니, 텍스트 위젯, 여백 위젯 등 필요한 위젯들을 배치하고 페이지 디자인을 완성합니다. 

• 메뉴리스트가 들어간 섹션의 디자인을 완성하면 섹션을 복사합니다. 

• 다른 하위메뉴에 섹션 붙여넣기를 합니다. 

• 새로운 하위메뉴의 내용으로 수정합니다. 

오른쪽 윗부분의 미리보기 아이콘을 눌러 메뉴리스트가 잘 작동하는지 확인할 수 있습니다. 게시하기 버튼을 눌러 게시완료 상태가 되면 사이트에서 디자인이 반영된 페이지를 확인할 수 있습니다.