디자인세로형 사이드 메뉴 만들기

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

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

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단계, 상단 메뉴 숨기기

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

상호명 : 애드리빙

서울시 마포구 마포대로 63-8 삼창프라자빌딩 1539호

사업자등록번호 : 106-04-80687 조회하기

통신판매업신고번호 : 제 2015-서울용산-00950 호

T.1566-5733  F.02-6499-3299  E.so2815@naver.com

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

test