인터넷을 돌아다니다 보면 위의 그림과 같이 메뉴를 클릭했을 때 특수한 형식으로 표시되는 메뉴를 만나곤 합니다. 이런 형식의 메뉴를 메가 메뉴(Mega Menu)라고 합니다.
워드프레스의 경우 아바다, 뉴스페이퍼 같은 일부 테마에서 메가 메뉴 기능을 제공하고 있습니다.
HTML에서 메가 메뉴를 구현하고 싶은 경우 다음 W3Schools 자료를 참고할 수 있습니다.
반응형까지 고려하여 제대로 만들려면 제법 시간이 걸릴 것 같습니다. 직접 만들기에는 시간이 너무 소요되고 결과물도 시원찮은 경우 코드캐년 마켓에서 판매하는 스크립트를 활용해볼 수 있습니다.
Web Slide - Bootstrap 4 Mega Menu Responsive (부트스트랩 4 메가 메뉴 반응형)
Bootstrap 4 반응형 사이드바 메뉴(sidebar menu responsive)
모든 종류의 반응형 메뉴 항목을 제공하는 웹 슬라이드 내비게이션 시스템으로 모바일 퍼스트(Mobile-first) 웹사이트 프로젝트를 만들 수 있습니다. Web Slide는 Pure CSS, HTML, jQuery로 만들어졌기 때문에 사용자 웹사이트 레이아웃에 맞게 커스터마이징할 수 있습니다.
자세한 내용과 데모는 Web Slide 사이트를 참고해보시기 바랍니다.
SmartMenu - Responsive jQuery Mega Menu (반응형 jQuery 메가 메뉴)
SmartMenu는 사용자에게 친숙하고 커스터마이징이 가능한 반응형 jQuery 메가 메뉴 플러그인으로 하위 메뉴가 다른 여러 개의 메뉴를 사용할 수 있습니다.
기능:
- 반응형 디자인
- 여러 개의 인스턴스 지원
- 가로(상단, 하단) 또는 세로(왼쪽, 오른쪽) 메뉴 레이아웃
- 메가/플라이아웃(Flyout) 서브메뉴
- Pure CSS3 애니메이션 (페이드, 슬라이드)
- 3가지 방식의 드롭다운(허버, 클릭, 토글)
- 쉽게 변경이 가능한 7가지 컬러 스킨
- 맞춤형 메가 드롭다운, 양식(폼), 검색 막대, 소셜 아이콘 또는 HTML
- 12개 컬럼 fluid grid
- 이미지, 지도 또는 동영상 추가 가능
- 430개 이상의 Font Awesome 아이콘
- 모바일 기기와 호환
- 도움말 파일 포함됨
자세한 내용과 데모는 SmartMenu 사이트를 참고하시기 바랍니다.
Conclusion
우리나라 사이트에서 메가 메뉴가 사용되는 경우가 많습니다. 메가 메뉴는 인상적인 시가적 효과를 낼 수 있지만 SEO(검색엔진최적화)적인 측면에서는 그리 바람직하지 않다고 합니다. SEO에 유리한 메뉴 구조에 대해서는 다음 글을 참고해보시기 바랍니다.
하지만 고객이 원한다면 메가 메뉴를 사용해야 할 것입니다. 그런 경우 직접 코딩을 하거나 위에서 소개한 HTML/CSS/jQuery 메가 메뉴 플러그인을 사용해볼 수 있을 것입니다.