목차
메가 메뉴는 탐색 항목 아래에서 열리고 많은 링크를 다른 아래에 쌓는 대신 열에 한 번에 배치하는 대형 패널 스타일 드롭 다운입니다. 스크롤 가능한 좁은 하위 메뉴를 전체 사이트 섹션의 넓은 미리보기로 대체하므로 방문자는 중첩 된 메뉴를 통해 사냥하는 대신 옵션을 볼 수 있습니다.
방문한 거의 모든 대형 소매점 또는 SaaS 사이트에서 하나를 사용했습니다. Amazon 의 카테고리 메뉴,대학의 학업 드롭 다운,소프트웨어 회사의 제품 및 솔루션 패널: 모든 메가 메뉴. 이 가이드는 메가 메뉴가 일반 드롭 다운과 다른 점,추가 복잡성이 성과를 거두었을 때,그렇지 않을 때,페이지 빌더 라이센스를 지불하지 않고 Elementor 에서 하나를 구축하는 방법을 다룹니다.
메가 메뉴란 무엇입니까?
메가 메뉴는 2 차원 드롭다운 패널로,단일 수직 스택 대신 너비와 높이를 모두 사용합니다. 6 개 또는 7 개의 링크로 구성된 하나의 열이 아닌 메가 메뉴에는 각각 고유한 제목,하위 링크 및 때로는 아이콘,썸네일 이미지 또는 짧은 프로모션 블록이 있는 4 개 또는 5 개의 열이 표시될 수 있습니다.
트리거는 모든 드롭다운과 동일하게 작동합니다: 제품,서비스 또는 쇼핑과 같은 최상위 항목을 마우스로 가리키거나 클릭합니다. 표시되는 내용은 다릅니다. 표준 드롭다운은 좁은 목록을 보여줍니다. 메가 메뉴는 카테고리별로 정리된 수십 개의 링크를 보유할 수 있는 전폭 또는 거의 전폭 패널을 엽니다 닐슨 노먼 그룹의 연구 방문자가 대형 탐색 패널을 스캔하는 방법에 대해 설명합니다.
메가 메뉴가 표준 드롭다운과 어떻게 다른가요
실질적인 차이는 세 가지로 귀결됩니다: 너비, 구조, 내용 유형.
- 너비: 표준 드롭다운은 폭이 200~300픽셀입니다; 메가 메뉴는 대부분의 뷰포트에 걸쳐 있을 수 있습니다.
- 구조: 드롭다운은 하나의 열입니다; 메가 메뉴는 종종 하위 제목 아래에 그룹화되는 여러 열을 사용합니다.
- 내용: 드롭다운은 일반 텍스트 링크입니다; 메가 메뉴는 종종 아이콘, 축소판 이미지 또는 짧은 설명과 링크를 혼합합니다.
그 구조적 차이는 메가 메뉴가 더 많은 계획을 세우는 이유이기도합니다. 표준 드롭 다운은 함께 던지기 쉽습니다: 6 개의 링크를 나열하면 완료됩니다. 메가 메뉴에는 실제 정보 아키텍처가 필요합니다: 어떤 카테고리가 최고 청구서를 받고,각 열에 무엇이 들어가고,네 개의 열을 나란히 놓을 공간이없는 전화 화면에서 모든 것이 어떻게 무너지는 지.
메가 메뉴 vs 드롭다운 vs 오프 캔버스 메뉴
메가 메뉴는 많은 탐색을 구성하는 유일한 방법은 아닙니다. 다음은 가장 일반적인 세 가지 패턴을 비교하는 방법입니다.
| 탐색 유형 | 위한 최고의 | 힘 | 조심하세요 |
|---|---|---|---|
| 표준 드롭다운 | 섹션당 페이지 수가 적은 사이트입니다 | 구축 속도가 빠르고 방문자에게 학습 곡선이 없습니다 | 8~10 링크를 지나면 방이 부족합니다 |
| 메가 메뉴 | 대형 카탈로그, 다양한 카테고리 또는 제품 라인 | 전체 섹션을 한눈에 보여주고, 이미지와 그룹화를 위한 공간을 보여줍니다 | 실제 디자인과 콘텐츠 계획이 필요합니다; 과용하기 쉽습니다 |
| 캔버스 외부 메뉴 | 모바일 우선 사이트, 최소 헤더 | 헤더를 깨끗하게 유지하고 작은 화면에서 잘 작동합니다 | 탭 뒤에 탐색을 숨기고 한 단계를 추가합니다 |
메가 메뉴가 실제로 도움이 될 때
메가 메뉴는 사이트가 진정으로 깊은 탐색을 할 때 복잡성을 얻습니다. 수십 개의 제품 카테고리가있는 전자 상거래 상점,학과 및 프로그램이있는 대학,많은 섹션이있는 미디어 사이트,여러 제품 및 사용 사례가있는 SaaS 회사는 모두 표준 드롭 다운을 빠르게 능가하는 경향이 있습니다.
테스트는 간단합니다: 현재 드롭다운에 이미 스크롤바가 필요하거나 방문자가 헤더에서 찾을 수 없어 검색을 통해 카테고리 페이지에 랜딩하는 경우 메가 메뉴는 하나를 장식하는 대신 실제 문제를 해결하고 있습니다.
메가 메뉴가 도움이 되는 것보다 더 아플 때
다섯 페이지로 구성된 작은 브로셔 사이트는 메가 메뉴가 필요하지 않으며 어쨌든 하나를 구축하면 일반적으로 사이트가 실제보다 더 복잡하게 느껴집니다. 전체 탐색이 6~7개의 링크에 맞으면 메가 메뉴에 시각적 무게, 추가 마크업 및 전화에서 끊을 수 있는 추가 기능이 추가되어 실질적인 이점이 없습니다.
나쁜 메가 메뉴는 단순한 메뉴보다 더 나쁩니다. “더 잘 보이게”하기 때문에 사이트의 모든 페이지를 하나의 패널에 벼락치기로 만들면 방문자가 실제로 원하는 링크를 그렇지 않은 링크 아래에 묻습니다. 모든 열이 똑같이 중요해 보인다면 그 중 어느 것도 패널을 만들기 전에 사람들이 실제로 검색하는 섹션으로 목록을 다듬으십시오.
일반적인 메가 메뉴 디자인 패턴
- 링크 열: 일반 분류 링크 목록, 가장 일반적인 패턴 및 유지 관리가 가장 쉽습니다.
- 추천 또는 프로모션 패널: 프로모션 이미지, 배너 또는 클릭 유도 문구 블록과 혼합된 링크 열입니다.
- 아이콘 주도 메뉴: saas 기능 및 솔루션 메뉴에서 흔히 볼 수 있는 작은 아이콘과 쌍을 이루는 각 링크입니다.
- 탭 메가 메뉴: 최상위 카테고리는 패널 내부의 탭 역할을 하며 표시되는 열을 전환합니다.
접근성 및 모바일 고려 사항
메가 메뉴는 키보드 지원만큼만 좋습니다. 키보드로 헤더를 탭하는 방문자는 아무 것도 호버링할 수 없으므로 모든 트리거는 호버링과 포커싱 모두에서 열어야 합니다. 추가 aria-expanded 방아쇠에 그리고 aria-haspopup 따라서 화면 판독기는 패널을 사용할 수 있음을 알리고 Escape가 패널을 닫고 트리거에 초점을 반환하는지 확인합니다.
전화기에는 4 개의 열을 나란히 놓을 공간이 없으므로 대부분의 메가 메뉴는 햄버거 아이콘 아래에 쌓인 아코디언으로 축소됩니다. 실제 방문자처럼 축소 된 버전을 테스트하십시오: 탭 대상은 엄지 손가락으로 충분히 커야하며 목록은 보호중인 페이지보다 하단에 도달하기 위해 더 많은 스크롤을 수행해서는 안됩니다.
Elementor에서 메가 메뉴를 무료로 구축하는 방법
Elementor 의 자체 메가 메뉴 옵션은 Elementor 의 메뉴에서 다루는 중첩 메뉴 구성 요소 내부에 있는 Elementor Pro 뒤에 있습니다 메가 메뉴 문서. Elementor 무료 버전에 있는 경우 해당 경로는 닫혀 있습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 마스터 애드온 메가 메뉴 확장 elementor Pro 없이도 동일한 결과를 얻을 수 있습니다. 기존 WordPress 탐색 메뉴의 모든 항목을 그 아래에 완전히 설계된 Elementor 패널의 트리거로 전환하며, 이는 수십 가지 도구 중 하나입니다 마스터 애드온 위젯 및 확장 라이브러리.
- Elementor와 함께 Master Addon(무료)을 설치하고 활성화한 다음 Master Addon → Extensions에서 Mega Menu 확장을 활성화합니다.
- 모양 → 메뉴로 이동하거나 헤더를 엽니다 마스터 애드온 테마 빌더 헤더가 있는 곳이 바로 그곳이라면 메가 메뉴 활성화를 켜세요. 모든 메뉴 항목 옆에 보라색 마스터 메가 배지가 나타납니다; 메가 메뉴로 바꾸고 싶은 항목의 배지를 클릭하세요.
- 해당 항목에서 메가 메뉴를 활성화한 다음 Elementor로 편집을 클릭하여 패널을 디자인합니다: 열, 이미지, 아이콘 또는 프로모션 블록, 섹션에서 필요한 모든 것.
- 패널 너비, 전체 너비 또는 포함을 설정한 다음 데스크톱과 실제 휴대폰 모두에서 게시하고 확인합니다.
완성된 레이아웃으로 먼저 보고 싶으세요? The 메가 메뉴 데모 그리고 the 숯 Navbar & 메가 메뉴 섹션 둘 다 라이브 헤더에 확장을 표시합니다.
자주 묻는 질문
메가메뉴는 무슨 뜻인가요?
메가 메뉴는 탐색 항목 아래에서 열리고 많은 링크를 한 번에 표시하는 대형 다중 열 드롭다운 패널로,종종 카테고리별로 그룹화되고 아이콘이나 이미지와 쌍을 이룹니다. 하나의 좁은 목록을 사이트 섹션의 더 넓고 체계적인 미리보기로 대체합니다.
메가 메뉴를 만드는 방법?
일반 탐색 메뉴 항목을 메가 메뉴 트리거로 바꾼 다음 패널 내용을 디자인합니다: 링크, 제목, 선택적 이미지 또는 아이콘 열. WordPress 및 Elementor에서는 Master Addons Mega Menu와 같은 플러그인이 트리거를 처리하고 시각적으로 패널을 빌드할 수 있으므로 드롭다운 마크업을 직접 코딩할 필요가 없습니다.
일반 메뉴와 메가 메뉴의 차이점은 무엇입니까?
일반 드롭다운 메뉴는 텍스트 링크의 좁은 열 하나를 보여줍니다. 메가 메뉴는 여러 열이 있는 더 넓은 패널을 열고 종종 링크와 함께 이미지, 아이콘 또는 짧은 설명이 혼합됩니다. 일반 메뉴는 소수의 페이지에 적합합니다; 메가 메뉴는 많은 카테고리나 섹션이 있는 사이트에 적합합니다.
메가 메뉴를 사용하면 어떤 장점이 있나요?
메가 메뉴는 방문자가 중첩된 하위 메뉴를 열고 다시 열도록 하는 대신 전체 사이트 섹션을 한눈에 보여줍니다. 클릭 수를 줄여 깊은 페이지에 도달하고 아이콘이나 축소판과 같은 시각적 단서를 위한 공간을 제공하며 구성할 카테고리가 많은 상점,대학 및 소프트웨어 사이트에서 잘 작동합니다.
맥스메가 메뉴는 무료인가요?
독립 실행 형 WordPress 플러그인 인 Max Mega Menu 는 추가 기능을 위해 유료 추가 기능을 갖춘 WordPress.org 의 무료 버전을 보유하고 있습니다. 이미 Elementor 에서 빌드하고 있다면 Master Addons Mega Menu 확장은 별도의 메뉴 빌더 인터페이스 대신 Elementor 편집기로 패널을 디자인하는 무료 대안입니다.
나만의 메뉴는 어떻게 만들까?
탐색 메뉴를 먼저 모양 아래에 만든 다음 WordPress 의 메뉴를 만들고 방문자가 볼 순서대로 원하는 페이지와 링크를 추가합니다. 해당 메뉴가 있으면 해당 항목 중 하나를 메가 메뉴 트리거로 전환하고 그 위에 드롭다운 패널을 디자인할 수 있습니다.
관련 읽기
