Mega menu with Oxy Extra

1. Add Mega Menu inside Header Builder

• Header Builder 안에 "Add Mega Menu"

2. Add a number of dropdowns inside

• Mega Menu > Add New Dropdown
• Mega Menu / Dropdown Links
  • Colors : 텍스트 컬러 (호버/포커스/액티브), 배경색 (호버/포커스/액티브)

3. Add the elements or menu items inside the dropdowns

• Mega Menu > Default dropdown type
  • Custom widths
  • Header row width (container)
  • Header row width (content)
  • Full width
• Mega Menu > Mega Dropdown 내에 Slide Menu 삽입
• Slide Menu 에 클래스 부여
• Slide Menu를 필요한 만큼 Duplicate
• Slide Menu > Menu Type
  • Dropdown (Mega menu 의 Dropdown으로 사용할 경우)
  • Mega menu list (Mena Dropdown내의 리스트로 사용할 경우)
• 아까 Slide Menu에 클래스를 부여했으므로 이제 모든 Slide Menu 옵션을 컨트롤 하면 같은 클래스의 Slide Menu가 함께 적용이 됨.
  • 예를 들어, 컨테이너 내 Slide Menu 4개를 배치할 경우 Slide Menu > Advanced > Size&Spacing 에서 Width를 25%로 설정함.

4. Set default styles: padding / colors / widths / reveal animation

• Mega menu 의 General Settings (Across all dropdowns) 부분을 설정 하는 것임
  • 예를 들어, Mega Menu / Dropdowns - Background Color 설정 등
  • Mega Menu / Dropdowns / Shadows 설정 등 (참고로 Mega menu type이 Individual dropdowns(standard)로 설정되어 있어야 Shadow 속성이 적용됨)
• Mega Menu / Animation 에서 Container animation과 Content Animation을 설정할 수 있음

5. Change any indivisual dropdown styles if needed

필요시 Mega Dropdown의 개별적인 설정을 함

6. Add burger trigger (or some other click trigger)

• oxy extras의 burger trigger를 삽입
• Burger Trigger의 색상 / Scale 등을 조정
• Mega Menu > Mobile Menu
  • Vertical mobile menu below : 예를 들어, Less than 768px 등 설정함
• Burger Trigger 의 Advanced > Layout 의 display 속성을 none으로 설정하여 데스크탑 화면에서 감춤
• 그리고 예를 들어, Burger Trigger가 나타나야 하는 Width에서 display 속성을 flex로 설정함.
• Mega Menu > Mobile Menu 의 Background color 등 속성 설정
• Mega Menu > Dropdown links 에서 원하는 반응형 Width를 먼저 설정후 모바일 메뉴링크의 Active 색상 등을 설정함.

7. Choose mobile menu width & reveal burger

8. Adjust widths / padding to tighten up mobile design

9. Profit