섹션 고정을 활용해 상단 서브 메뉴 만들기

섹션 고정 기능을 활용해 마우스 휠 스크롤을 내려도 서브 메뉴가 상단 메뉴의 바로 아래 고정되도록 디자인할 수 있습니다. 아래의 애니메이션은 그 예시로, 특정 페이지에서 많은 서브 메뉴를 보여줄 때 효과적입니다.

설정방법

서브 메뉴를 삽입할 빈 섹션을 생성합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해 서브 메뉴를 추가할 메뉴로 이동합니다.
  3. 위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.

  5. 새로운 빈 섹션이 생겨납니다.

메뉴 리스트 위젯을 활용해 출력할 서브 메뉴를 불러옵니다.

  1. 빈 섹션 중앙의 더하기 ⨁ 아이콘을 클릭합니다.
  2. 위젯 목록이 나오면 메뉴 리스트 위젯을 클릭합니다.
  3. 메뉴 리스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 메뉴 리스트 설정 창이 나타나면 기준 위치 항목에서 표시할 서브 메뉴를 포함하는 상위 메뉴를 선택합니다.

    참고: 위 애니메이션을 예를 들면 모든 서브 메뉴(상품 카테고리)를 포함하는 SHOP을 선택할 수 있습니다.

  5. 메뉴 리스트 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  6. 메뉴 리스트 위젯에 서브 메뉴(상품 카테고리)가 정상적으로 출력되는지 확인합니다.
  7. (선택 사항) 여백 위젯을 메뉴 리스트 위젯의 위, 아래에 추가해 충분한 여백을 추가해 줍니다.

메뉴 리스트 위젯이 포함된 섹션을 상단 메뉴 바로 아래까지 이동시킵니다.

  1. 메뉴 리스트 위젯이 포함된 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

    중요: 위젯이 없는 곳에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭하세요. 더 자세한 방법은 섹션 이동하기 도움말을 참고하시길 바랍니다.
  2. 섹션 컨텍스트 메뉴가 나오면 위로 이동을 클릭합니다. (상단 메뉴 바로 아래까지 위로 이동시켜주세요.)

  3. 섹션을 가장 위로 올리면 아래 그림과 같이 상단 메뉴 바로 아래 위치하게 됩니다.

서브 메뉴가 포함된 섹션을 해당 위치에 고정합니다.

  1. 메뉴 리스트 위젯이 포함된 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  3. 섹션 설정 창 오른쪽 하단의 섹션 고정 옵션을 선택합니다.

  1. 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 마우스 휠 스크롤을 아래로 내려봅니다.
  3. 서브 메뉴가 포함된 섹션이 상단에 고정되어 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 오른쪽 상단의 게시하기 버튼을 클릭해 웹에 적용합니다.
목록으로