• 가이드

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

마우스 휠 스크롤 시 서브 메뉴가 상단 메뉴의 바로 아래 고정되도록 설정할 수 있습니다.

다음의 애니메이션은 그 예시입니다. SHOP 메뉴에 포함된 서브 메뉴(상품 카테고리)들이 마우스 휠을 스크롤 하더라도 상단 메뉴 아래에 고정되는 걸 확인할 수 있습니다.

설정방법

1단계: 빈 섹션 추가하기

서브 메뉴를 추가할 빈 섹션을 추가합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단  를 클릭합니다.
  3. 서브 메뉴를 추가할 메뉴명을 클릭해 이동합니다.
  4. 빈 섹션을 한 개 추가합니다. 빈 섹션 추가방법
2단계: 서브 메뉴 출력하기

빈 섹션에 메뉴 리스트 위젯을 추가하고, 서브 메뉴를 출력합니다.

  1. 빈 섹션 중앙의 더하기 아이콘을 클릭합니다.

  2. 위젯 목록이 나오면 메뉴 리스트 위젯을 클릭합니다.
  3. 메뉴 리스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 메뉴 리스트 설정 창이 나타납니다.
  5. 기준 위치 항목에서 표시할 서브 메뉴를 포함하는 상위 메뉴를 선택합니다.
    참고: 위 애니메이션으로 예를 들면, 모든 서브 메뉴(상품 카테고리)를 포함하는 SHOP을 선택합니다.

  6. 메뉴 리스트 설정 창 오른쪽 상단 를 클릭해 종료합니다.
  7. 메뉴 리스트 위젯에 서브 메뉴(상품 카테고리)들이 출력되는지 확인합니다.
3단계: 섹션 위로 이동하기

메뉴 리스트 위젯이 포함된 섹션을 상단 메뉴 바로 아래까지 이동하는 단계입니다. 섹션 이동 방법은 다음 도움말을 참조해주세요.

섹션 이동하기 (위로 이동, 아래로 이동)

4단계: 섹션 고정하기

서브 메뉴가 포함된 섹션을 해당 위치에 고정하는 단계입니다.

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

(선택 사항) 5단계: 섹션 배경 반투명 처리하기

필요에 따라 서브 메뉴가 포함된 섹션의 배경을 반투명하게 처리할 수 있습니다. 이 단계는 옵션입니다.

  1. 서브 메뉴가 포함된 섹션 설정을 열어줍니다. 섹션 설정 열기
  2. 배경 항목의 배경색 옵션값을 편집해 투명도를 변경할 수 있습니다.
    • 배경색 옵션 오른쪽 컬러피커를 클릭합니다.

    • 투명도 슬라이더 좌우로 움직여, 투명도를 조절합니다. 오른쪽으로 옮길수록 투명해지며, 맨 끝으로 옮기면 완전히 투명해집니다.

  3. 컬러피커 바깥 영역에 마우스를 클릭해 색상 선택을 종료합니다.
  4. 오른쪽 상단 를 클릭해 섹션 설정을 종료합니다.
(선택 사항) 6단계: 다른 메뉴에 서브메뉴 섹션 복제하기

위 1~5단계 과정에 따라 제작한 서브메뉴를 다른 메뉴에도 추가할 수 있습니다. 서브메뉴가 포함된 섹션을 복사해, 다른 메뉴에 붙여넣어 주세요. 섹션을 복사/붙여넣기 하는 방법은 아래 도움말 링크를 참고해 주세요.

섹션 복사하기, 섹션 붙여넣기

7단계: 동작 확인 및 게시하기

정상적으로 동작하는지 확인하고, 웹에 게시합니다.

  1. 오른쪽 상단 미리보기  아이콘을 클릭합니다.
  2. 마우스 휠을 스크롤 해봅니다.
  3. 서브 메뉴가 포함된 섹션이 상단 메뉴 바로 아래 고정되는지 확인합니다.
  4. 디자인 모드가 켜진 브라우저 탭으로 돌아갑니다.
  5. 디자인 모드 오른쪽 상단 게시하기 버튼을 클릭해 웹에 적용합니다.
목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

218.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

315

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.9K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.