OxyExtras - Mega Menu Options

메가메뉴 만들기 8단계

1. 헤더빌더 안에 메가메뉴 추가하기
2. 필요한만큼 Dropdowns 추가하기
3. Dropdown 안에 Elements 나 Slide menu 추가하기
4. Mega Menu 스타일링 : Padding / Colors / Widths / Reveal Animation
5. 필요시 개별 Dropdown 스타일링
6. Burger Trigger 추가하기 (다른 클릭 요소도 가능)
7. Mobile Menu width와 Display 설정
8. Mobile Design의 Width와 Padding 추가

메가메뉴 타입

- Individual dropdowns

기본값이며 가장 일반적으로 사용되는 타입입니다. 각각의 Dropdown은 개별적인 높이와 폭값을 가질수 있고 해당 dropdown link가 클릭되거나 Hover되었을 때 나타납니다.

- Container dropdown

마치 하나의 컨테이너 안에 모든 dropdown 메뉴들이 들어가 있는 것처럼 만들고 싶을 때 선택합니다.

예시) https://www.squarespace.com/

컨테이너 드랍다운 타입에서는 드랍다운 메뉴를 브라우징할 때 '컨테이너'가 열린상태로 있게 된다는 것입니다. 즉, 컨테이너 내 컨텐츠만 변경됩니다. 이 메뉴타입의 단점은 컨테이너 내부 컨텐츠가 특정 높이와 폭값을 갖도록 맞출 필요가 있다는 것입니다. 보기에는 화려하지만 많이 사용되지는 않습니다.

이 메뉴타입을 선택하면 Expanded container height를 설정할 수 있도록 하게 되는데 스크린 반응형 폭에 따라 내부 컨텐츠가 변경될 수 있으므로 Width 마다 높이가 알맞게 조절되어야 할 것입니다.

메가메뉴 구조

1. 메가메뉴

메가메뉴 자체는 비어있는 컨테이너에 불과함. 즉, 페이지에 어떠한 것도 추가하지 않음.

2. 메가메뉴 드롭다운

드롭다운들이 모든 콘텐츠들이 있는 곳이고 몇 개의 핵심요소로 구성되어 있음

2a. 드롭다운 링크 / 아이콘