메뉴PC 하단 고정 섹션 구현하기 (코드, 하단 고정 메뉴)

섹션 반복 기능과 섹션 위치를 브라우저 하단에 고정하는 코드를 활용하여 아래의 애니메이션과 같은 하단 고정 섹션(또는 메뉴)를 제작할 수 있습니다.

주의: 본 튜토리얼에서 제공하는 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 어려움을 미리 말씀드립니다.

설정방법

페이지 하단에 고정으로 표시할 나만의 섹션을 디자인합니다.

예를 들어, 위 애니메이션과 같이 방문자의 이메일을 받을 수 있는 입력폼이 삽입된 섹션을 만들 수 있으며, 버튼, 메뉴 리스트 위젯을 활용해 메뉴로 디자인할 수도 있습니다.

디자인 모드에 접속합니다. 접속방법
아무 메뉴에서 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴가 나오면 빈 섹션추가 를 클릭합니다.
참고:이 과정에서 생성한 섹션은 앞으로 모든 메뉴에서 표시되게 설정할 것이므로 아무 메뉴에서 빈 섹션을 추가해도 무방합니다. 필요한 경우 일부 메뉴(예: 상품 상세페이지, 마이페이지 등)에선 이 섹션이 표시되지 않도록 숨길 수도 있습니다.
빈 섹션이 나오면 위젯을 추가하고 배치하여 섹션을 디자인합니다.

위 1단계에서 디자인한 하단 고정 섹션이 모든 메뉴에서 표시되도록 섹션 반복 기능을 활성화 합니다.

위 1단계에서 제작한 섹션의 ID 값을 확인 후 복사합니다.

디자인한 섹션이 페이지 하단에 항상 고정되는 코드를 추가합니다.

아래의 코드를 복사해 붙여넣습니다.

<style> @media (min-width: 992px) {    #섹션ID {        position: fixed;        bottom: 0;        width: 100%;        z-index: 1040;    } }
</style>

(선택 사항) 특정 메뉴에서 하단 고정 메뉴 감추기

특정 메뉴에서는 하단 고정 메뉴가 숨겨지도록 설정할 수 있습니다. 만약 상품 상세페이지, 장바구니, 마이페이지 등에서 하단 고정 메뉴가 사이트 이용을 방해하는 경우, 아래의 도움말에서 하단 고정 메뉴를 감춰보세요.

특정 메뉴의 반복 섹션 숨김 처리하기

섹션 반복 기능을 활용하면, 모든 메뉴마다 페이지 하단에 같은 디자인의 섹션이 표시되도록 설정할 수 있습니다. 다만 특정 메뉴에서는 반복 섹션이 나오지 않도록 숨김 처리해야 하는 경우 다음 방법을 참조할 수 있습니다.