Мега-меню — это большой выпадающий блок, который открывается при наведении на пункт главного меню. В отличие от обычного выпадающего списка, в нём можно разместить не только ссылки, но и заголовки разделов, картинки, кнопки и короткие описания. Такой формат удобен для сайтов с большим количеством страниц: интернет-магазинов с десятками категорий, сайтов услуг, онлайн-школ, порталов с несколькими рубриками.
В редакторе Wix мега-меню устроено как контейнер, который добавляется в меню как отдельный пункт. Когда посетитель наводит курсор на этот пункт на опубликованном сайте, контейнер раскрывается.
Когда мега-меню действительно нужно
Много разделов второго уровня. Если под одним пунктом прячется больше 7–10 страниц, обычный выпадающий список становится длинным и неудобным.
Нужно показать структуру. Мега-меню позволяет разбить ссылки на колонки с подзаголовками: например, «Женщинам», «Мужчинам», «Аксессуары».
Хочется выделить главное. В контейнер можно добавить баннер акции, популярную категорию или кнопку записи.
Если страниц на сайте немного, мега-меню скорее усложнит навигацию. В этом случае достаточно обычного меню с одним уровнем вложенности.
Шаг 1. Добавьте горизонтальное меню и сделайте его расширенным
Мега-меню работает только в горизонтальном меню, переведённом в расширенный режим (Advanced). В обычных, тематических и вертикальных меню контейнер мега-меню не поддерживается.
Нажмите Добавить элементы (Add Elements) на левой панели редактора.
Выберите Меню и якоря (Menu & Anchor) → Горизонтальные меню.
Перетащите подходящий дизайн меню на страницу — обычно в шапку сайта.
Выделите меню, откройте Настройки и выберите Сделать расширенным (Set as Advanced), затем подтвердите во всплывающем окне.
Шаг 2. Добавьте пункт «Мега-меню»
Выделите расширенное меню и нажмите Управлять меню (Manage Menu).
Внизу панели нажмите + Добавить пункт меню.
Выберите Мега-меню (Mega Menu).
Введите название пункта и нажмите Готово.
Название пункта лучше делать коротким и понятным: «Каталог», «Услуги», «О нас». Посетитель должен догадаться, что откроется, ещё до наведения курсора.
Шаг 3. Соберите вложенную структуру
Если нужно показать внутри мега-меню список связанных страниц, используйте вложенные пункты. В панели Управлять меню добавьте нужные пункты и перетащите их под пункт мега-меню — структура соберётся автоматически. Так получается аккуратный список ссылок без ручной вёрстки.
Шаг 4. Наполните контейнер
В панели Управлять меню наведите курсор на пункт мега-меню и нажмите Редактировать.
Откройте Добавить элементы и выберите нужный элемент: текст, кнопку, изображение, фигуру.
Перетащите элемент в контейнер и разместите его.
Практичная схема для магазина: 3–4 колонки с подзаголовками категорий и ссылками на подкатегории, а справа — карточка с акцией или новинкой. Для сайта услуг: колонки по направлениям и кнопка «Записаться» или «Рассчитать стоимость».
Шаг 5. Настройте раскладку и дизайн
Чтобы изменить раскладку, кликните по контейнеру, нажмите значок Макет (Layout) и выберите раздел Мега-меню. Здесь можно:
растянуть контейнер на всю ширину экрана или ограничить его шириной страницы (по линиям сетки);
изменить отступ между меню и раскрывающимся контейнером.
Оформление — фон, рамки, тени — задаётся через дизайн самого меню: выйдите из режима мега-меню, выделите меню, нажмите Дизайн → Настроить дизайн и выберите в списке Выпадающий контейнер (Dropdown container). Эти настройки применяются и к обычным выпадающим спискам меню, поэтому оформление остаётся единым. Стиль пунктов выпадающего списка на элементы внутри мега-меню не переносится — текст и кнопки в контейнере оформляются отдельно.
Советы по удобству
Не перегружайте блок. Чем больше ссылок, тем дольше посетитель ищет нужную. Группируйте страницы и оставляйте только важные.
Проверьте мобильную версию. На телефоне наведения курсора нет, поэтому навигация отображается иначе. Откройте мобильный редактор и убедитесь, что все важные разделы доступны.
Используйте понятные подписи. Внутренние названия отделов и маркетинговые слоганы в меню путают посетителей.
Следите за контрастом. Текст в контейнере должен хорошо читаться на выбранном фоне.
Мега-меню помогает не только посетителям, но и поисковым системам: ссылки на ключевые разделы оказываются на каждой странице сайта. О том, как ещё улучшить структуру и видимость сайта, читайте в материалах о SEO на Wix и об изменении шапки при прокрутке.