Last updated : 2021-10-02

Mega menu with Oxy Extra

1. Add Mega Menu inside Header Builder Header Builder 안에 "Add Mega Menu" 2. Add a number of dropdowns inside […]
Written by : doogak

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

magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram