모바일 메뉴버튼, 특정 메뉴만 펼치기 (코드, 중급)
주의: 이 도움말은 아임웹에서 제공하지 않는 기능을 코드로 해결하는 방법은 안내합니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 동작하지 않을 수 있습니다.
메뉴 버튼 위젯은 기본적으로 상위 메뉴, 하위 메뉴를 모두 접은 채로 표시됩니다. 만약에 상품이 진열된 메뉴 등 주요 메뉴만 펼쳐 보여주고 싶다면, 아래의 CSS 코드를 사용해 특정 메뉴를 펼쳐 표시해 보길 바랍니다.
만약 모든 메뉴를 펼치고자 하신다면 [모바일 메뉴버튼 메뉴 펼치기 (코드, 초급)] 가이드를 참고해 주세요.
설정방법
- 내 사이트 관리자 페이지에 접속합니다. 접속방법
- 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
- 마우스 휠 스크롤을 움직여 공통 코드 삽입 항목으로 이동합니다.
아래의 코드를 복사합니다.
<style> /* 특정 메뉴만 펼치기 */.mobile_slide_menu_container .viewport-nav.mobile a[data-url="메뉴 주소"] + ul {display: block !important;height: auto !important; }/* (선택) 메뉴의 토글 화살표 숨기기 */.mobile_slide_menu_container .viewport-nav.mobile a[data-url="메뉴 주소"] .toggle-btn {display: none !important; } </style>Body Code 항목에 붙여넣습니다.
'메뉴 주소' 부분에는 하위 메뉴 펼침이 필요한 메뉴의 주소로 수정해 주세요.
메뉴 주소는 [디자인 모드 > 왼쪽 상단의 ≡ 아이콘 클릭]하여 메뉴명 옆의 (메뉴주소)에서 확인 가능해요.
- 저장 버튼을 클릭해 적용합니다.
- 내 사이트로 이동해 모바일 화면에서 모바일 메뉴버튼 특정 메뉴가 펼쳐져 보이는지 확인합니다.참고: 모바일 기기가 아니라 PC에서도 모바일 버전을 확인할 수 있습니다. 자세한 방법은 PC에서 모바일 버전 미리보기 도움말을 참고해 주세요.