• 가이드

세로형 사이드 메뉴 만들기

메뉴 리스트 위젯을 사용해 사이트의 왼쪽 또는 오른쪽에 세로형 사이드 메뉴를 추가할 수 있습니다. 본 튜토리얼을 통해 사이드 메뉴 제작법을 배워보세요.

이후 상단 메뉴를 숨길 필요가 있다면 본 튜토리얼 마지막 추가 정보를 확인해주세요.

아임웹 Our-mind 템플릿

제작방법

1단계, 메뉴 추가하기
  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리  를 클릭합니다.
  3. 상단 메뉴 오른쪽 끝 ⨁를 클릭합니다.
  4. 메뉴명을 작성하고 확인을 클릭합니다. 예시) 홈
  5. (선택 사항) 같은 방법으로 메뉴를 더 추가합니다.
    예시) 제품, 문의게시판, 회사소개
2단계, 세로 메뉴 만들기
  1. 빈 메뉴에 메뉴 리스트 위젯을 추가합니다.

  2. 추가한 위젯에 마우스를 올리고 마우스 오른쪽 버튼을 클릭합니다.
  3. 메뉴 리스트 위젯 설정(메뉴/카테고리 설정)을 엽니다.
  4. 다른 스타일을 클릭합니다.
  5. 세로 메뉴 스타일을 선택합니다.

  6. 기준 위치 기본값은 현재 메뉴입니다. 현재 메뉴의 하위 메뉴들이 표시되며, 하위 메뉴가 없는 경우 형제 메뉴들로 구성되어 표시됩니다.

  7. (선택 사항) 메뉴 텍스트의 크기, 색상, 간격을 수정합니다.
    참고 : 하단 옵션은 선택하신 메뉴 리스트 스타일에 따라 조금씩 달라집니다.

3단계, 섹션 사이드 나누기
  1. 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
  2. 보조 메뉴가 나타나면 섹션 설정을 클릭합니다.
  3. 사이드를 선택합니다.

  4. (선택 사항) 본문과 사이드 간의 간격을 설정합니다.

  5. (선택 사항) 섹션 사이드 고정을 사용하는 경우 체크합니다.
    참고 : 섹션 사이드 영역을 마우스 스크롤을 통해 벗어나더라도 메뉴 리스트가 사라지지 않고 상단에 고정됩니다. 섹션 사이드 고정은 해당 섹션 내에서만 유지됩니다.

4단계, 본문 콘텐츠 추가하기
  1. 메뉴 리스트 위젯을 클릭하고 드래그하여 섹션 사이드로 이동시킵니다.
    참고 : 메뉴 리스트 위치가 틀어지는 경우 새로고침(F5)를 눌러주세요.

  2. 섹션 본문에 관련 콘텐츠를 추가하고 디자인합니다.
(선택 사항) 5단계, 섹션 복제 및 추가 메뉴 만들기
  1. 사이드가 나눠진 섹션의 빈 공간에 마우스 오른쪽 버튼을 클릭하고 섹션 복사를 클릭합니다.
  2. 위 1단계에서 추가한 메뉴 중 다른 메뉴로 이동합니다.
  3. 빈 메뉴에 마우스 오른쪽 버튼을 클릭하고 섹션 붙여넣기를 클릭합니다.
  4. 섹션 본문을 해당 메뉴에 맞게 콘텐츠를 수정합니다.
  5. 같은 방법으로 나머지 메뉴에도 사이드 메뉴를 추가합니다.
(선택 사항) 6단계, 상단 메뉴 숨기기

메인 메뉴를 사이드에 표시하는 경우 상단에 위치한 메뉴는 숨겨야 할 수 있습니다.  상단 메뉴를 숨기는 방법은 다음 도움말을 참조해주세요.

메뉴 상단 숨김

목록으로

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

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

리셀러/디자이너 신청

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

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

115.6K

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

297

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

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

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