Оглавление
Мегаменю - это большое раскрывающееся меню в стиле панели, которое открывается под элементом навигации и выкладывает множество ссылок одновременно в столбцы, вместо того, чтобы складывать их одну под другой. Оно заменяет узкое, прокручиваемое подменю широким предварительным просмотром целого раздела сайта, поэтому посетители видят свои варианты вместо того, чтобы охотиться через вложенные меню.
Вы использовали один почти на каждом большом розничном или SaaS сайте, который вы посетили. меню категории Amazon, раскрывающийся список академиков университета, панель продуктов и решений компании-разработчика программного обеспечения: все мега меню. Это руководство охватывает то, что делает мега меню отличным от обычного раскрывающегося списка, когда дополнительная сложность окупается, когда она не окупается, и как построить его в Elementor, не платя за лицензию на создание страниц.
Что такое мегаменю?
Мегаменю - это двумерная раскрывающаяся панель, то есть она использует и ширину, и высоту вместо одного вертикального стека. Вместо одного столбца из шести или семи ссылок мегаменю может отображать четыре или пять столбцов, каждый со своим заголовком, подссылками, а иногда и значком, миниатюрой или коротким промоблоком.
Триггер работает так же, как и любой раскрывающийся список: наведите указатель мыши или щелкните элемент верхнего уровня, например "Продукты", "Услуги" или "Магазин". Что появляется, то отличается. Стандартное раскрывающееся меню показывает узкий список. Мегаменю открывает панель полной или почти полной ширины, которая может содержать десятки ссылок, организованных по категориям, согласно исследования Nielsen Norman Group о том, как посетители сканируют большие навигационные панели.
Как мегаменю отличается от стандартного раскрытия
Практическая разница сводится к трем вещам: ширине, структуре и типу контента.
- Ширина: стандартное раскрывающееся меню имеет ширину от 200 до 300 пикселей; мегаменю может охватывать большую часть окна просмотра.
- Структура: раскрывающийся список - это один столбец; мегаменю использует несколько столбцов, часто сгруппированных под подзаголовками.
- Содержание: раскрывающийся список - это простые текстовые ссылки; мегаменю часто смешивает ссылки со значками, миниатюрами или короткими описаниями.
Это структурное различие также является причиной того, что мега меню требуют большего планирования. стандартное раскрывающееся меню легко собрать воедино: перечислите шесть ссылок, и вы закончите. мегаменю нуждается в реальной информационной архитектуре: какие категории получают верхние счета, что идет в каждом столбце и как все это рушится на экране телефона, где нет места для четырех столбцов рядом.
Мегаменю против выпадающего и выпадающего меню
Мега-меню - не единственный способ организовать много навигации. вот как сравниваются три наиболее распространенных шаблона.
| Тип навигации | Лучший Для | Сила | Берегись |
|---|---|---|---|
| Стандартный Dropdown | Сайты с несколькими страницами в разделе | Быстрое строительство, отсутствие кривой обучения для посетителей | Выбегает из комнаты за 8-10 ссылок |
| Мега Меню | Большие каталоги, множество категорий или продуктовых линеек | Краткий обзор показывает весь раздел, место для изображений и группировки | Нужен реальный дизайн и планирование контента; легко переусердствовать |
| Внехолстовое меню | Сайты с поддержкой мобильных устройств, минимальные заголовки | Сохраняет заголовок чистым, хорошо работает на небольших экранах | Скрывает навигацию за касанием, добавляя еще один шаг |
Когда мегаменю действительно помогает
Мегаменю зарабатывает свою сложность, когда сайт имеет действительно глубокую навигацию. магазины электронной коммерции с десятками категорий продуктов, университеты с факультетами и программами, медиасайты со многими разделами и компании SaaS с несколькими продуктами и вариантами использования - все они имеют тенденцию быстро перерастать стандартный раскрывающийся список.
Тест прост: если вашему текущему раскрывающемуся файлу уже нужна панель прокрутки или посетители попадают на страницы категорий через поиск, потому что не смогли найти их в заголовке, мегаменю решает реальную проблему вместо того, чтобы украшать ее.
Когда мегаменю причиняет боль больше, чем помогает
Небольшой сайт брошюры с пятью страницами не нуждается в мега-меню, и построение его в любом случае обычно делает сайт более сложным, чем он есть. если вся ваша навигация помещается в шесть или семь ссылок, мега-меню добавляет визуальный вес, дополнительную разметку и еще одну вещь, которая может сломаться на телефоне, без реальной пользы.
Плохое мега меню хуже простого меню Втиснув каждую страницу сайта в одну панель, потому что “более заметный лучше” хоронит ссылки, которые посетители действительно хотят под теми, которых они не хотят Если каждый столбец выглядит одинаково важным, ни один из них не является. обрезать список до разделов, которые люди действительно ищут, прежде чем вы создадите панель.
Общие шаблоны дизайна мегаменю
- Столбец ссылок: простые классифицированные списки ссылок, наиболее распространенный шаблон и самый простой в обслуживании.
- Рекомендуемая или промо-панель: столбцы ссылок, смешанные с промо-изображением, баннером или блоком призыва к действию.
- Меню под значком: каждая ссылка сочетается с небольшим значком, общим для функции SaaS и меню решений.
- Вложенное мегаменю: категории верхнего уровня действуют как вкладки внутри панели, переключая отображаемые столбцы.
Доступность и мобильные соображения
Мегаменю только так же хорошо, как его поддержка клавиатуры Каждый триггер должен открываться как на hover, так и на focus, так как посетитель, табулируя через заголовок с клавиатурой, не может ничего навести. добавить aria-expanded на спусковой крючок и aria-haspopup таким образом, программы чтения с экрана объявляют, что панель доступна, и убедитесь, что Escape закрывает панель и возвращает фокус на триггер.
На телефонах нет места для четырех столбцов рядом, поэтому большинство мега меню сворачиваются в сложенный гармонь под значком гамбургера. проверьте свернутую версию как настоящий посетитель: цели касания должны быть достаточно большими для большого пальца, и список не должен принимать больше прокрутки, чтобы достичь дна, чем страница, которую он защищает.
Как создать бесплатное мегаменю в Elementor
За Elementor Pro живет собственный мегаменюо опция Elementor, внутри вложенного компонента Меню, покрытого Elementor документация мегаменю. Если вы находитесь в свободной версии Elementor, этот путь закрыт.
The Расширение Master Addons Mega Menu получает тот же результат без Elementor Pro. Он превращает любой элемент существующего навигационного меню WordPress в триггер для полностью спроектированной панели Elementor под ним, и это один из десятков инструментов в Библиотека виджетов и расширений Master Addgets.
- Установите и активируйте главные дополнения (бесплатно) вместе с Elementor, затем включите расширение Mega Menu из главных дополнений → расширений.
- Перейдите в "Внешний вид" → "Меню" или откройте заголовок в Мастер-создатель тем аддонов если это то, где живет ваш заголовок, и включите Включить мега-меню. фиолетовый значок Master Mega появляется рядом с каждым пунктом меню; щелкните значок на элементе, который вы хотите превратить в мега-меню.
- Включите мегаменю для этого элемента, затем нажмите "Редактировать с помощью Elementor", чтобы создать панель: столбцы, изображения, значки или промо-блоки, независимо от того, что нужно разделу.
- Установите ширину панели, полную ширину или содержащуюся, затем опубликуйте и проверьте ее как на рабочем столе, так и на реальном телефоне.
Хотите сначала увидеть его в готовом макете? Демо-версия мега-меню и Раздел "Угольная навигация и мегаменю" оба показывают расширение в заголовке в реальном времени.
Часто задаваемые вопросы
Что значит мегаменю?
Мегаменю - это большая многоколоночная раскрывающаяся панель, которая открывается под элементом навигации и отображает множество ссылок одновременно, часто сгруппированных по категориям и в паре со значками или изображениями. Он заменяет один узкий список более широким организованным предварительным просмотром раздела сайта.
Как создать мегаменю?
Превратите обычный пункт меню навигации в триггер мега-меню, затем создайте содержимое панели: столбцы ссылок, заголовки и дополнительные изображения или значки. В WordPress и Elementor плагин, такой как Master Addons Mega Menu, обрабатывает триггер и позволяет визуально создать панель, поэтому вам не нужно вручную кодировать раскрывающуюся разметку.
Чем отличается обычное меню от мегаменю?
Обычное раскрывающееся меню показывает один узкий столбец текстовых ссылок Мегаменю открывает более широкую панель с несколькими столбцами, и часто смешивает изображения, значки или короткие описания рядом со ссылками Обычные меню подходят для горстки страниц; мегаменю подходят сайты со многими категориями или разделами.
В чем преимущества использования мегаменю?
Мегаменю показывает целый раздел сайта с первого взгляда вместо того, чтобы заставлять посетителей открывать и вновь открывать вложенные подменю. оно уменьшает количество кликов, чтобы достичь глубокой страницы, дает вам место для визуальных подсказок, таких как значки или миниатюры, и хорошо работает для магазинов, университетов и сайтов программного обеспечения с множеством категорий для организации.
Меню Max Mega бесплатное?
Меню Max Mega, автономный плагин WordPress, имеет бесплатную версию на WordPress.org с платными дополнениями для дополнительных функций. если вы уже строите в Elementor, расширение Master Addons Mega Menu является бесплатной альтернативой, которая проектирует панель с редактором Elementor вместо отдельного интерфейса menu-builder.
Как мне создать собственное меню?
Создайте свое навигационное меню сначала в разделе "Внешний вид", затем "Меню" в WordPress, добавив страницы и ссылки, которые вы хотите, в порядок, в котором посетители должны их видеть. Как только это меню существует, вы можете превратить любой из его элементов в триггер мегаменю и спроектировать раскрывающуюся панель поверх него.
Связанное чтение
