메가메뉴 만들기 8단계
- 헤더빌더 안에 메가메뉴 추가하기
- 필요한만큼 Dropdowns 추가하기
- Dropdown 안에 Elements 나 Slide menu 추가하기
- Mega Menu 스타일링 : Padding / Colors / Widths / Reveal Animation
- 필요시 개별 Dropdown 스타일링
- Burger Trigger 추가하기 (다른 클릭 요소도 가능)
- Mobile Menu width와 Display 설정
- Mobile Design의 Width와 Padding 추가
메가메뉴 타입
- Individual dropdowns
기본값이며 가장 일반적으로 사용되는 타입입니다. 각각의 Dropdown은 개별적인 높이와 폭값을 가질수 있고 해당 dropdown link가 클릭되거나 Hover되었을 때 나타납니다.
- Container dropdown
마치 하나의 컨테이너 안에 모든 dropdown 메뉴들이 들어가 있는 것처럼 만들고 싶을 때 선택합니다.
예시) https://www.squarespace.com/
컨테이너 드랍다운 타입에서는 드랍다운 메뉴를 브라우징할 때 '컨테이너'가 열린상태로 있게 된다는 것입니다. 즉, 컨테이너 내 컨텐츠만 변경됩니다. 이 메뉴타입의 단점은 컨테이너 내부 컨텐츠가 특정 높이와 폭값을 갖도록 맞출 필요가 있다는 것입니다. 보기에는 화려하지만 많이 사용되지는 않습니다.
이 메뉴타입을 선택하면 Expanded container height를 설정할 수 있도록 하게 되는데 스크린 반응형 폭에 따라 내부 컨텐츠가 변경될 수 있으므로 Width 마다 높이가 알맞게 조절되어야 할 것입니다.
메가메뉴 구조
1. 메가메뉴
메가메뉴 자체는 비어있는 컨테이너에 불과함. 즉, 페이지에 어떠한 것도 추가하지 않음.
2. 메가메뉴 드롭다운
드롭다운들이 모든 콘텐츠들이 있는 곳이고 몇 개의 핵심요소로 구성되어 있음