세로형 사이드 메뉴 만들기

'메뉴 리스트 위젯'을 사용해 페이지의 왼쪽 또는 오른쪽에 세로형 사이드 메뉴를 추가할 수 있습니다. 이 도움말에서는 아래의 그림과 같은 세로형 사이드 메뉴를 디자인하는 방법을 통해 설명합니다.

제작방법

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

  2. 추가한 위젯에 마우스를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 메뉴 리스트 위젯의 위젯 설정을 열어줍니다. 위젯 설정 열기
  4. 다른 스타일 버튼을 클릭합니다.
  5. 세로 메뉴 스타일을 선택합니다.

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

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

  1. 위젯이 없는 빈 공간에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 위젯에 마우스 오른쪽 버튼을 클릭하지 마세요.
  2. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  3. 사이드 항목에서 사이드 나눔 방식(사이드 없음, 왼쪽 사이드, 오른쪽 사이드)을 선택합니다.

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

    • 사이드 가로 크기: 사이드 영역의 가로 간격을 입력합니다.
    • 본문과 여백: 본문과 사이드 영역 간의 여백을 입력합니다.
  5. (선택 사항) 섹션 사이드 고정을 사용하는 경우 체크박스를 선택합니다.

    참고: 섹션 사이드 영역을 마우스 휠 스크롤을 통해 벗어나더라도 메뉴 리스트가 사라지지 않고 상단에 고정됩니다. 섹션 사이드 고정은 해당 섹션 내에서만 유지됩니다.

  1. 메뉴 리스트 위젯을 클릭하고 드래그하여 섹션 사이드로 이동시킵니다.

    참고: 브라우저 특성상 사이드 영역에 위젯을 이동하면 레이아웃이 틀어질 수 있습니다. 이때 새로고침(F5)를 누르면 정상적으로 표시됩니다.

  2. 섹션 본문에 관련 콘텐츠를 추가하고 디자인합니다.

사이드 영역에 최상위 메뉴를 추가하는 경우, 상단 메뉴가 필요하지 않을 수 있습니다. 상단 메뉴는 메뉴 설정에서 상단 숨김 옵션을 통해 숨길 수 있습니다.

  1. 디자인 모드 최상단 가운데 위치한 메뉴명을 클릭합니다.
  2. 메뉴 설정 창이 나오면 옵션 항목으로 이동합니다.
  3. 상단 숨김 옵션을 선택합니다.
  4. 메뉴 설정 창 바깥 영역을 클릭해 설정을 종료합니다.
  5. 상단 메뉴가 숨겨집니다.

섹션 복제 기능을 활용해 모든 페이지에 사이트 메뉴를 추가할 수 있습니다. 현재 작업 중인 섹션을 복사 후 다른 메뉴로 이동해 붙여넣기 해보세요.

  1. 사이드 메뉴에 위젯이 없는 곳에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 섹션 컨텍스트 메뉴가 나오면 섹션 복사를 클릭합니다. (해당 섹션이 복사됩니다.)
  3. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  4. 사이드 메뉴를 붙여넣기할 메뉴를 클릭해 이동하거나, 새로운 메뉴를 생성합니다.
  5. 새 메뉴에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 섹션 컨텍스트 메뉴가 나오면 섹션 붙여넣기를 클릭합니다.
  7. 섹션 복제가 완료되면 본문 영역에 위젯을 추가하여 메뉴 주제에 맞게 콘텐츠를 수정합니다.
목록으로