Adaptive Header Styling
Menu Styles / Options의 Javascript 섹션에서 //adaptive height animation 아래 heightAnimation 값을 true로 설정합니다.
Stripe Menu Styling
Menu Styles / Options의 Javascript 섹션에서 //Stripe menu animation 아래 stripeStyle 값을 true로 설정합니다.
Nav (Nestable) Attributes
[data-last-item-is-button-alignment]
last button을 제외한 메뉴의 정렬, 기본값은 Right이며 값을 ‘left’ 또는 ‘center’로 설정할 수 있습니다.
[data-submenu-reveal]
모바일에서 서브메뉴가 나타나는 방식을 slide 또는 expand 중에서 선택할 수 있습니다. 이 설정은 각각의 메뉴 아이템 Attribute에서 개별적으로 설정할 수도 있습니다.
Offcanvas Menu Styling
오프캔버스 메뉴는 Nav (Nestable) 요소의 Attributes에서 [data-offcanvas] 속성값을 true로 설정합니다.
[data-slide-in-direction]
오프캔버스 메뉴의 슬라이드 from 위치를 설정합니다. 기본값은 right 이며 left, left top, left bottom 등 설정할 수 있습니다.
Sidebar Menu Styling
사이드바 메뉴로 설정하기 위해선 Header Template의 템플릿 설정에서 Header location을 Left 또는 Right로 변경하여 줍니다. 사이드바의 Header width는 var(–mobile-menu-width)로 설정할 수도 있으나 필요시 변경도 가능합니다.
사이드바 메뉴가 활성화 된 상태에서 Menu Styles / Options CSS의 맨 마지막 부분의 post id를 템플릿 postid로 변경하여야 빌더에서 볼 수 있습니다.
With the sidebar active, in the css style, scroll to last two rules, replace the post id to your header template postid in order to view it in the builder.
사이드바 메뉴가 활성화 되면 웹페이지의 가로폭은 사이드바 넓이(Header width)만큼 좌측 또는 우측으로 밀려납니다. 만약 웹페이지 화면이 밀려나지 않고 사이드바 메뉴가 전체화면 위에 위치하도록 하려면 [data-overlay-sidebar]속성을 true로 설정합니다.
Megamenu Pro 업데이트 하는 방법
기존의 Header Template에서 업데이트된 템플릿을 import 방식을 통해 임포트합니다.
기존 Header에 Attribute 속성값을 확인하여 새로운 헤더의 속성값도 동일하게 변경해 줍니다. 이러한 속성값을 변경해 줘야 하는 요소는 Header 섹션, Nav (Nestable)이 있습니다.
MENU Styles / Options 코드블락의 CSS와 Javascript 도 내용을 확인한 후 값들을 맞게 변경해 주어야 합니다.
Structure 패널에서 기존 Header의 Logowrap 폴더와 Nav items 폴더를 새로운 템플릿 섹션으로 이동복사합니다.
기존 Header의 모든 코드블록을 삭제하고 새로운 Header의 모든 코드블럭을 실행시키고 필요시 Sign을 진행합니다.
Content Width 조정하기
Mega Menu Pro는 글로벌 설정과 개별 설정을 모두 갖춘 데이터 속성을 사용하여 메가 메뉴 콘텐츠의 크기와 위치를 유연하게 조절할 수 있는 방법을 제공합니다.
Individual Dropdown Content Width ([data-content-width])
이 속성은 특정 드롭다운 콘텐츠의 너비를 설정하는 데 사용됩니다. 1.4.1 버전 이상부터는 다음을 포함한 다양한 유형의 값을 허용합니다.
- 숫자: 예: 1080(‘px’ 포함 여부 가능).
- CSS 변수: var(–content-width) 등.
- 선택자: #my_id 또는 .my-class, HTML 태그 및 속성 등.
선택자를 사용하면 콘텐츠 너비가 선택한 요소의 너비와 자동으로 일치합니다. 이를 구현하려면 메가 메뉴 콘텐츠 요소(.dwc-nest-nav-list)를 선택한 후 속성패널로 이동하여 [data-content-width] 값을 원하는 값으로 설정합니다.
Global Content Width ([data-global-content-width])
이 속성은 버전 1.4에 도입되었으며 모든 메가 메뉴 드롭다운의 콘텐츠 너비를 한꺼번에 설정할 수 있습니다.
이를 구현하려면 Nav Nestable 요소(.dwc-nest-menu)를 선택한 후 속성탭으로 이동하여 [data-global-content-width] 값을 원하는 설정값으로 설정합니다.
Starter Template을 이용하기
Starter Template은 Megamenu Dropdown Content내에 위치해야 합니다. 기존의 Content Inner 폴더를 Replace하는 식으로 새로운 Starter Template를 적용할 수 있습니다.