что такое мега меню

Записки лондонского бурундука

написанные в здравом уме и трезвой памяти

Мега-меню – новая тенденция в дизайне

Мега-меню – то, с чем почти все уже сталкивались, но над чем мало кто задумывался.

Каждый дизайнер знает, как сложно проектировать навигацию большого сайта. Каждый пользователь знает, как иногда сложно ориентироваться в куче разветвленных меню интернет-магазинов и порталов.

Решение проблемы – мега-меню. Причем, по мнению автора статьи “Mega Menus: the Next Web Design Trend” Craig Buckler (урл статьи http://www.sitepoint.com/blogs/2009/03/30/mega-drop-down-menus/), мега-меню – это новая тенденция в дизайне сайтов.

Что такое мега-меню?

Меню, которое раскрывается в виде одной большой панели при наведении мышки на пункт основного меню.

Используется мега-меню, главным образом, на больших сайтах и в интернет-магазинах.

Мега-меню

Почему мега-меню (по мнению автора статьи) станут популярными:

DesignM.AG приводит интересную подборку мега-меню на сайтах известных брендов (Найк, Адидас, B&Q и т.д.)

Вот некоторые из них. Мега-меню действительно смотрятся и солидно, и удобно. Лишь бы мышка не соскальзывала с меню, пока его целиком прочитаешь :).
Action

Adidas

Сам Якоб Нильсен (Jakob Nielsen), обычно скептически относящийся к дизайнерским нововведениям, одобрил мега-меню: Mega Drop-Down Navigation Menus Work Well, урл http://www.useit.com/alertbox/mega-dropdown-menus.html. Конечно, он призывает делать такие меню как можно проще и не использовать ничего, что не вписывалось бы в идею click-to-go. Мега-меню должно раскрываться очень быстро (за 0.1 секунды), однако до того, как оно раскроется, мышка должна неподвижно застыть над панелью навигации (иначе при движении мышки по экрану меню будет постоянно открываться и закрываться).

Что я пока не уяснила для себя – как простой пользователь интернета поймет, мега-меню он видит или простое меню? Когда я вижу меню, я кликаю по нужной мне опции меню. При этом я не держу мышку 0.5 секунды неподвижно над нужным мне пунктом меню. Разве что сделать в меню небольшой универсальный значок, который бы указывал на то, что меню разворачивается? Со временем пользователь начнет узнавать такой значок и знать, что надо не сразу кликать, а подождать, пока развернется меню.

Источник

20 плагинов мега-меню для WordPress

Выпадающие мега-меню — отличная дизайнерская находка.Навигация по сайту, содержащим большое количество страниц, всегда представляла собой определенную проблему. Классическое статическое меню а-ля sitemap быстро разрастаются по мере роста числа страниц и занимают очень много места. Динамические выпадающие меню позволяют существенно экономить пространство страницы, но в жертву приносится удобство пользования — для навигации требуется активная и довольно точная работа мышью. Чуть промахнулся и раскрывается не то меню.

Толчком к развитию концепции мега-меню послужил, вероятно, ленточный интерфейс Microsoft Office 2007. Эта концепция находится как раз посредине между простым статическим меню и динамическим раскрывающимся. С одной стороны, такое меню достаточно информативно и интуитивно понятно, с другой — значительно сокращает необходимые манипуляции мышью. Раскрываясь, оно может использовать все доступное пространство экрана, что позволяет пользователю охватить взглядом все предлагаемые в данном контексте пункты, а при необходимости скрывается.

Как бы там ни было, а мега-меню сейчас, что называется, в тренде и если вы до сих пор еще не использовали его, то стоит присмотреться к нему поближе.

UberMenu: WordPress Mega Menu Plugin

Этот многофункциональный плагин смело можно поставить на первое место в этом обзоре: создаваемое им мега-меню полностью адаптивное, имеет невероятное количество различных опций, в том числе управления цветом фона и шрифта, размером шрифта и т.п. И все это выполняется из мощной и удобной панели настроек.

Mega Main Menu

Очень популярный и широко используемый плагин Mega Main Menu умеет держать баланс между функциональностью и простотой. В вашем распоряжении свыше 10 различных инструментов для создания выпадающих меню, которые могут содержать текст, изображения, ссылки и виджеты. А кроме этого — неограниченные цветовые настройки и свыше 600 шрифтов Google.

Liquida Mega Menu

Liquida Mega Menu — современный и многофункциональный плагин, который подойдет как обычным пользователям, так и разработчикам — его можно легко встроить в собственную разрабатываемую тему.

Плагин предлагает широкие возможности для создания меню с современным и стильным дизайном: вертикальной или горизонтальной ориентацией, возможностью включать в пункты меню ссылки, изображения и даже карточки товаров WooCommerce или Easy Digital Downloads, что может пригодиться при разработке интернет-магазинов.

Sky Mega Menu

Три варианта дизайна для мобильных устройств, 9 цветовых схем, собственная сетка, формы и 360 векторных иконки. Этот набор позволяет Sky Mega Menu занять достойное место среди себе подобных.

WP Mega Menu

Плагин из категории must have. Множество настроек и опций, работа с категориями, подкатегориями и сообщениями, SEO-оптимизация и две предустановленные цветовые схемы (темная и светлая), которые, впрочем, можно легко изменить по своему вкусу.

NOO Menu

Для того, чтобы разобраться в панели настроек NOO Menu вам даже не придется читать документацию — настолько все интуитивно понятно. Имея под рукой предварительный просмотр в реальном времени, вы сможете просто изменять значения и передвигать ползунки, наблюдая производимый эффект. Цветовую схему можно изменять совершенно произвольно и каждый вариант сохранять под своим именем, причем количество этих вариантов неограничено.

Содержимое пунктов меню может представлять собой текст, ссылки, изображения, видео, формы и различные виджеты. Для размещения всего этого используется собственная 12-колоночная сетка.

Hero Menu – Responsive WordPress Mega Menu Plugin

Hero Menu позволяет привязывать к пунктам меню ссылки на сообщения, категории, внешние URL, а также отображать в них записи блога вместе с featured image. В последней версии анонсирована полная поддержка платформы WooCommerce. Для удобной работы имеет встроенный drag-and-drop редактор.

Дизайн современный и стильный и, конечно же, полностью адаптивный.

Superfly — Responsive WordPress Menu Plugin

Так называемое fly-меню — последний тренд в мире веб-дизайна. Такое меню тихо «дремлет» в углу странички в виде пиктограммы, практически не занимая места, а при наведении курсора раскрывается, смещая элементы страницы, а не перекрывая их.

Одним из представителей данной разновидности мега-меню является Superfly — Responsive WordPress Menu Plugin. Впечатляющий инструмент как в плане дизайна, так и характеристик.

Toggle Menu

С ростом популярности мобильных устройств, всплывающие (или контекстные) меню приобретают важное значение, поскольку позволяют значительно экономить экранное пространство.

Toggle menu — очень простое, минималистическое меню, которое, тем не менее, отлично справляется со своей основной функцией.

WP Floating Menu Pro

WP Floating Menu Pro — это плагин 2 в 1. Меню-навигатор для одностраничного сайта и меню-наклейки. Более того: при помощи этого плагина вы сможете, по крайней мере визуально, превратить свой традиционный сайт в современный одностраничный. WP Floating Menu Pro обеспечит плавную прокрутку от одной части страницы к другой.

В распоряжение разработчика WP Floating Menu Pro предлагает 13 шаблонов и 7 различных вариантов расположения на странице, возможности настройки, цвета, содержимого и количества пунктов.
Для экранов разрешением менее 480px имеется возможность автоматического отключения меню.

Mega Menu by WooRockets.com (Free)

WR Mega Menu — это мощное, адаптивное мега-меню со встроенным, интуитивно понятным редактором, позволяющим в итоге получить именно то, что вы задумывали.

Flexi Menu WordPress Plugin

Flexi Menu — это 5 различных, полностью настраиваемых типа меню: fly-меню, широкое (на ширину страницы), широкое+описания, широкое+изображения и вертикальное.

Max Mega Menu (Free)

Очень неплохой плагин с drag-and-drop редактором меню и возможностью встраивания в пункты меню практически любых виджетов — от контактных форм до карт Google.

Способен автоматически преобразовывать уже существующие обычные меню в одно мега-меню с полным контролем над процессом преобразования и сохранением или переназначением соответствующих действий.

Side – WordPress Responsive Menu

Этот плагин, несомненно, понравится приверженцам минимализма. Меню открывается на весь экран по нажатию пиктограммы Menu и прячется после выбора нужного пункта. Все предельно просто. Дизайн простой и ясный, никаких посторонних элементов.

Path style menu

Очень симатичное и оригинальное меню для WordPress. При нажатии на основную кнопку которая, кстати, может располагаться в любом месте страницы, «выскакивают» значки и располагаются вокруг нее. У вас есть полный контроль над месторасположением этих кнопок: в линию горизонтально или вертикально, по окружности вокруг или вдоль более сложной линии, такой как кривая Безье. Иконки внутри объектов можно легко изменять простой заменой файлов-иконок в медиа-галерее.

Morph

Разработанный изначально для мобильных устройств этот плагин отлично показал себя и на десктопных экранах. Он имеет встроенный редактор, позволяющий создавать обычные и многоуровневые меню, устанавливать фон отдельно для каждого пункта или меню в целом и управлять другими аттрибутами и внешним видом меню.

Tactile

Как становится понятным из названия это меню заточено именно под мобильные устройства. Дизайн выполнен в стиле Google’s Material Design, присутствуют различные анимационные эффекты. В целом меню производит приятное впечатление как внешним видом, так и богатыми возможностями настройки различных параметров.

Источник

Мега меню — зло или благо

Мега меню — тип меню на сайте или в приложение, открывающее по действию список доступных тематических категорий или подкатегорий сайта. Это отличное решение, позволяющее сэкономить полезную площадь на сайте и показать пользователю больше полезного контента, чем навигационных элементов.

Мега-меню имеют следующие характерные черты:

Пример мега-меню на сайте DaveRamsey открывает пользователю пять тематических подкатегорий, разделы которых видны сразу. Пользователь сразу понимает, что найдет в каждой из категорий.

Пример мега-меню на сайте Nova Scotia показывает категории, каждая из которых имеет свой графический элемент в заглавии. Это не самое удачное решение, в данном случае измененные шрифты, а также разные цветовые решения для категорий воспринимались бы лучше. Альтернативным решением для картинок каждой из категорий в данном меню становятся тематические схематические иконки, четко отражающие тему каждой из категорий. Они легче считываются при беглом просмотре.

Пример сайта Moleskine показывает, как графическая визуализация категорий упрощает восприятие тематических категорий.

Мега-меню существенно экономят пространство и качественно структурируют информацию на сайте. Более того такой тип меню упрощает доступ к нужной категории, улучшает пользовательский опыт. Так как категории и подкатегории видны в развернутом виде сразу, то от пользователя не требуется дополнительных действий. Это уменьшает риск ошибочного клика.

Почему мега-меню лучше стандартных выпадающих списков

Результаты тестирования мега-меню показали, что пользователи положительно воспринимают такой тип навигации:

Мега-меню по наведению мышки

Если мега-меню открывается по наведению курсора мышки, то важно понимать намерение пользователя в данный момент времени, чтобы избежать ошибочных действий. Важно понимать, что пользователь делает в данный момент на сайте:

В первом случае срабатывание и раскрытие мега-меню ухудшит пользовательский опыт, тогда как во втором случае важно своевременно открыть меню. Как понять, что хочет пользователь? Решение простое:

Если эти условия не выполняются, пользовательский опыт станет просто невозможным, так как постоянно появляющиеся списки вызовут раздражение.

Что важно помнить при создании мега-меню

Выводы:

Любое нововведение на сайте требует тщательного А/В тестирования.

Мега-меню будут работать только в том случае, если они действительно правильно группируют элементы и упрощают доступ пользователя к категориям, находящимся в глубине сайта.

Помогая пользователям обнаружить больше элементов на сайте, вы способствуете повышению продаж.

Источник

Когда использовать (и не использовать) мега-меню для навигации

Если вы делали покупки в Интернете, есть большая вероятность, что вы переместились в мегаменю.

Это огромное меню со ссылками на различные разделы и подразделы сайта. Они популярны на сайтах с большим количеством контента, особенно на сайтах розничной торговли.

Если вы пользуетесь интернет-магазином или другим сайтом с множеством ссылок, по которым люди могут ориентироваться, то может показаться, что мегаменю не составляет никакого труда. Но так ли это?

В этой статье я рассмотрю некоторые сценарии, в которых мегаменю будет улучшать ваш сайт, и те, в которых он не будет улучшаться.

Что такое мега-меню?

Мега-меню — это своего рода навигационное меню, в котором все параметры видны одновременно, как по горизонтали, так и по вертикали. Иногда они будут разбиты на разделы, иногда нет.

Примером этого является меню на веб-сайте Amazon UK, которое занимает весь экран:

Но на американском сайте Amazon не использует мегаменю, а вместо этого стандартное выпадающее меню:

Который просто показывает, что мегаменю не всегда являются ответом!

Мега-меню, как правило, имеют:

Мега-меню и пользовательский опыт

Основным принципом использования мега-меню должен быть ответ на один простой вопрос:

Мегаменю облегчает людям навигацию по моему сайту?

Вы не должны просто добавить один, потому что они последняя крутая вещь. Добавление мегаменю на ваш сайт должно учитывать пользовательский опыт (UX). Если ваше мегаменю сделает процесс навигации более плавным и интуитивно понятным, добавьте его. Если этого не произойдет, или вам просто не нужно так много пунктов в меню, придерживайтесь обычного выпадающего меню.

Другой вопрос, который вы можете задать себе, решая, использовать ли мегаменю, таков:

Поможет ли мегаменю моему сайту достичь своих целей?

Вы можете подумать, что это неопределенный вопрос, на который трудно ответить, но все аспекты дизайна и содержания вашего сайта должны быть связаны с тем, чего ваш сайт пытается достичь. Это может быть одной из нескольких вещей:

Я уверен, что у веб-сайта гораздо больше целей, но это одни из самых распространенных. Понимание вашей поможет вам точно знать, какие страницы на вашем сайте вы хотите, чтобы пользователи посещали для достижения ваших целей.

Так что, если вы хотите, чтобы люди покупали товары через Интернет, а у вас большой и сложный магазин, мегаменю может быть хорошим вариантом. Но если у вас есть один очень специфический продукт или услуга, и вы хотите направить людей на страницу продаж для этого, то мегаменю может отвлечь.

Прежде чем вы решите, добавлять ли мегаменю, найдите время, чтобы подумать, чего вы хотите добиться от своего сайта, куда на вашем сайте вы хотите поощрять посетителей, и какая навигация будет стимулировать их делать это.

Ниже приведены некоторые конкретные примеры того, как мегаменю может улучшить ваш сайт.

Когда использовать мега-меню

Давайте рассмотрим некоторые сценарии, когда мегаменю являются полезным дополнением к вашему сайту.

1. Когда пользователи ожидают одного

Если ваш сайт является розничным, то пользователи привыкли видеть мегаменю и использовать их для навигации по отделам магазина.

Источник

Max Mega Menu — функциональный плагин мега меню для WordPress сайтов

Насколько я понимаю, под термином мега меню в WordPress подразумевают сверхфункциональное огромный блок навигации по сайту со множеством разных элементов: списками, картинками, текстами, слайдерами и т.п. Наверняка вы такие встречали. Когда-нибудь опубликую полноценную подборку по теме, но сегодня речь пойдет о вполне конкретном решении — плагине Max Mega Menu. Выбрал его так как уже тестировал в работе для WooCommerce меню, он часто попадает в списки лучших модулей, плюс тут имеется одна из самых толковых и постоянно развивающихся бесплатных (Lite) версий.

Сразу после установки Max Mega Menu в WordPress ваша стандартная навигация преобразуется в более мощный и функциональный механизм с возможностью добавления разного рода виджетов, удобным редактором и кучей дополнительных настроек. Скачивайте плагин отсюда либо ищите его через WP админку.

На данный момент минимальная требуемая версия системы — 3.8, работает до последней сейчас 4.8.3. Загрузок около 100 тысяч. Мне нравится, что за последние 2 месяца было исправлено почти 70 разных багов из 89, что свидетельствует о хорошей активности разработчиков.

Основные функции и фишки Max Mega Menu

Чтобы понять насколько все это круто и удобно, советую просто глянуть следующее видео:

Кроме всего разработчики могут похвастаться очень правильными и корректным подходим к созданию своего решения. WordPress Max Mega Menu — действительно качественный продукт, вот вам парочка подтверждений:

Настройка и работа с Max Mega Menu

Сразу после установки в админке появится одноименный раздел. В «Основных настройках» вы сможете подправить несколько опций, касающихся поведения подменю, мобильных девайсов и т.п. Куда более интересными выглядят «Темы».

Здесь сразу 6 вкладок с разными фишками:

После того как основные параметры заданы, переходим в раздел WP админки «Внешний вид» — «Меню».

Вам нужно выбрать меню, с которым хотите работать, а затем в его настройках поставить галочку напротив «Включено». Активировать Max Mega Menu в WordPress получится только когда для меню заданна область отображения в шаблоне (шапка, футер, сайдбар и т.п.). Здесь же есть параметры эффектов и событий срабатывания.

Чтобы открыть редактор модуля наводим курсор на один из пунктов иерархии и нажимаем на появившуюся кнопку «Мега меню». Во всплывающем окне отобразится соответствующий инструмент, который вы могли видеть в видеопрезентации плагина выше.

Тут сможете, во-первых, определить количество столбцов, а также добавить любые виджеты. Кроме того, допускается изменение размеров каждого элемента. Выбирать виджеты разрешается только в первом (главном) уровне навигации. Если кликать по кнопке «Мега меню» напротив других элементов, то только для задания иконок и разных свойств:

Скрытие текста/линка, выравнивание и отключение на декстопе/мобильных — весьма полезный набор функций. Допускается задание подобных опций в каждом пункте меню. Не забывайте сохранять изменения.

Max Mega Menu Pro и Выводы

Что же входит в Max Mega Menu Pro:

Для рядовых классических сайтов вполне хватает обычной бесплатной версии Max Mega Menu в WordPress, которая по функциональности очень хороша. Разных настроек здесь очень много. Понравилось также, что разработчики поддерживают свое детище, относительно быстро исправляют текущий баги и заботятся о чистоте/корректности кода. На ознакомление придется потратить некоторое время, но оно того стоит. Чтобы проще было разобраться с работой плагина — смотрите видео и читайте документацию.

А какие модули Mega Menu в WordPress вы используете и почему? Работали с данным решением, что можете по нему добавить?

Источник