Управление выводом товаров в категории. Стиль Metro: новая реализация

Выпадающие меню. Еще совсем недавно они встречались повсеместно. Но жизнь не стоит на месте и, похоже, что эпоха выпадающих меню подходит к концу. Навигация в виде раскрывающихся списков уже не отвечает современным реалиям – пользователям нужно нечто другое.

Людям нужны другие меню и новые возможности навигации, которые будут проще и понятнее. Желательно также, чтобы меню не содержало большого количество опций – сегодня никто не хочет несколько секунд размышлять, где именно находится нужная информация. Навигационное меню должно быть аппаратно-агностическим и работать одинаково на разных типах устройств, создавая единый пользовательский опыт. Что же можно предпринять, если становится ясно, что раскрывающееся меню, при всех его достоинствах, является не лучшим решением? Есть как минимум пять вариантов.

СКРОЛЛИНГ-ПАНЕЛИ

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

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

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

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

СКРЫТЫЕ ГАМБУРГЕРЫ

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

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

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

ПЛИТОЧНАЯ НАВИГАЦИЯ

Плитки, плитки. Все чаще в интернете встречаются сайты с плиточным дизайном – феноменальный успех Pinterest не дает покоя многим дизайнерам. Плитки-карточки как нельзя лучше подходят для маленьких дисплеев, людям нравится такой подход к демонстрации контента, так почему бы не использовать плитки в качестве навигационного меню?

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

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

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

ЛИПКИЕ МЕНЮ

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

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

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

ВЕРИТКАЛЬНАЯ НАВИГАЦИЯ

Вертикальная навигация используется на двух популярнейших сайтах – Facebook и Twitter, однако сайтов, которые используют такой подход пока еще не так много.

Но это социальные медиа. В случае с другими сайтами вертикальная навигация может быть не очень эффективной. Если же данный прием имеет свои плюсы, то стоит подумать, где расположить сайдбар – слева или справа. Навигация должна работать в непосредственной связке с контентом, так что придется тщательно проанализировать, в какую сторону «тянет» пользователя содержимое сайта.

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

ВЫВОД

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

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

Виды отображения каталога

Чтобы настроить вид отображения товаров в каталоге, то есть, как будут расположены товары в витрине магазина, необходимо перейти в панель администрирования, пункт меню "Настройки-Каталог товаров" вкладка "Общие" (рис.1).

Рисунок 2.

Рассмотрим, как будет расположен товар в категориях в витрине магазина в зависимости от выбранного вида.

Рисунок 3.

Рисунок 4.

Рисунок 5.

Также в подразделе "Тип отображения списка товаров", в строке "В поиске (по умолчанию)" можно указать, какой вид отображения использовать для товаров в результатах поиска.

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

Рисунок 6.

Количество товаров на одной странице

Чтобы указать какое количество товаров выводить в категории на одной странице, необходимо перейти в панель администрирования, пункт меню "Настройки-Каталог товаров" вкладка "Общие" (рис.7).

Рисунок 7.

В разделе "Вывод товаров" в строке "Товаров на странице" укажите, какое количество товаров выводить в категории на одной странице.

Настройка вывода превью фотографий в каталоге

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

Рисунок 8.

Чтобы настроить вывод превью фотографий в каталоге, необходимо перейти в панель администрирования, пункт меню "Настройки - Каталог товаров". В разделе "Вывод товаров" в строке "Показывать превью фотографий" устанавливаем галочку.

Рисунок 9.

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

Настройка вывода количества фотографий в каталоге

Чтобы настроить вывод количества фотографий в каталоге у товара, необходимо перейти в панель администрирования, пункт меню "Настройки - Каталог товаров". В разделе "Вывод товаров" в строке "Выводить количество фотографий" устанавливаем галочку (рис.10).

Рисунок 10.

Данная опция определяет отображать или нет в каталоге у товара небольшую иконку с количеством фотографий у товара (рис.11).

Рисунок 11.

Настройка вывода товаров в наличии не в наличии

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

Рисунок 12.

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

Настройка вывода товаров в каталоге в соответствии с сортировкой

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

Чтобы установить сортировку, необходимо перейти в панель администрирования, вкладка "Каталог". Нажимаем кнопку "Редактироваnm" (рис.13) и в блоке "Отображение - Сортировка по умолчанию" выбираем соответствующую сортировку (рис.14).

Рисунок 13.

Рисунок 14.

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

Всё готово.

Как скрыть отображение артикула в каталоге

При просмотре каталога под наименованием товара отображается артикул (рис. 15), при необходимости его можно скрыть.

Рисунок 15.

Для этого необходимо перейти в панель администрирования, пункт меню "Настройки" -> "Каталог товаров" (рис. 16.1), далее вкладка "Общие" (рис.16.2).

Рисунок 16.1.

Рисунок 16.2.

Рисунок 17.

Рисунок 18.

Рисунок 19.

И соответственно, снимите галочку в данной строке, если не хотите чтобы рейтинг товара отображался в карточке товара.

Отключение отображения цветов в каталоге

Рассмотрим, как же отключить отображение цветов в каталоге.

Цвета в каталоге отображаются следующим образом (рис.20).

Рисунок 20.

Для того, чтобы цвета отображались только в карточке товара, в каталоге их не было, необходимо перейти в пункт меню "Настройки" - "Каталог товаров" (рис.20.1), вкладка "Общие", раздел "Размер и цвет", и снимите галочку в поле "Учитывать в клиентском каталоге разные цены, цвета, фотографии у одного товара (требуется больше ресурсов)" (рис.20.2)

Рисунок 20.1

Рисунок 20.2

Сохраните изменения и проверьте в клиентской части, цвет в каталоге не отображается (рис.21)

Рисунок 21.

Чтобы переместить товары не в наличии в конец списка на странице каталога, необходимо перейти в панель администрирования, пункт меню "Настройки->Каталог - вкладка "Общие" (рис.22,п.3).

Рисунок 22.

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

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

6. Cтудия Grafik . Работы представлены как плиточки. При этом при выборе каждой отельной рубрики (фотографии, веб, бренды), все работы «гаснут» и на экране остаются яркими только те, которые относятся к той или другой рубрике. Помимо этого существует еще и выпадающее меню вверху страницы сайта.

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

8. Интересный сайт студии Tisha creative , на котором как бы протекает обычная жизнь Лондона — меняется день и ночь, а меню для удобства пользователей подсвечивается белым.

9. Learnlakenona . Попутешествуйте по озеру, ведь это — настоящая карта со всеми надписями. Никогда не знаешь, что найдешь под очередным объектом на карте.

10. Alexbuga предлагает нам настоящее сложное технически меню. У пользователя создается впечатление, что он зашел не послушать музыку, а заглянул в настоящую аппаратную. Так и чешутся руки поклацать кнопки и потянуть все рычажки. На этом сайте даже можно самому сочинить музыку;-)

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

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

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

14. Добро пожаловать в бар Getraenke-kukral ! Хотите воды, лимонада, пива или сока? Меню на этом сайте реализовано посредством использования больших иконок, которые олицетворяют тот или другой напиток. При наведении контур меню слегка подсвечивается темным цветом.

15. Typographica Меню этого сайта — типографические работы, но в придачу существует выпадающее меню с детальным описанием содержания всей рубрики. Интересно, что в развернутом виде можно открыть все рубрики одновременно.

16. Workatplay — меню сайта спрятано в верхнем левом угле страницы, но открывается при движении мышки в соответствующем направление. Кроме этого — красивое сочетание цветов — розовый шрифт на черном фоне.

17. Benhulse . Типичное плиточное меню. При этом каждая рубрика слегка подсвечивается при наведении. Просто и понятно.

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

19. Molanphydesign Оранжевая еле заметная подсветка меню.

20. Синяя подсветка Fullyillustrated реализовуется одновременно в двух ракурсах — сверху страницы и снизу фотографии. Таким образом, обозначено, что каждый пример с галереи задается одновременно двумя рубриками (одной нижней и одной верхней).

21. Builtbybuffalo — Обратите внимания на обозначения активного меню оранжевой каплей.

22. Mariecatribs На активное меню указывают стрелочки.

По Вашему запросу плиточное меню найдено 708 результатов

В данном уроке мы создадим слайдшоу с эффектом параллакса с помощью нескольких свойств CSS3. Идея заключается в перемещении положения двух фоновых изображений при скольжении контейнера со слайдами.

Соответствие: 1
Хорошей практикой при работе с WordPress является привычка организовывать загрузку файлов только тогда, когда нужно. Данный принцип касается как клиентской части, так и инструментов администратора. Нет причин загружать CSS и JavaScript файлы для всей панели администратора, когда они нужны только на одной странице. В WordPress имеется инструмент, который позволяет реализовать такой функционал с помощью только одной функции.

Соответствие: 1
Выскальзывающая панель навигации, построенная с использованием CSS3. В панели применяются изображения, для которых изменяется прозрачность. Панель будет работать и браузерах IE, но без эффектов.

Соответствие: 1
Используем HTML5 для создания текста с эффектами 3D (с помощью теней) и расположения его по кругу. Также будет выполняться анимация движения букв.

Соответствие: 1
Условные теги являются одним из мощных инструментов, которые помогают облегчить разработку проектов на WordPress. В данном уроке мы рассмотрим несколько условных тегов и примерами функций, использующих их для реализации различных задач, таких как очистка страницы ошибок или изменение фавиконки для панели администратора.

Соответствие: 1
Динамические информаторы требуют привлечения внимания. Каждый раз, когда происходит изменение, нужно воспроизводить визуальный эффект, чтобы пользователь увидел, что происходит. Воспользуемся анимациями CSS3.

Соответствие: 1
Такие индикаторы загрузки вы наверняка встречали, особенно на Flash сайтах. Это сектор круга, который становится все больше и больше, пока не превратится в завершенный круг.

Соответствие: 1
В данном уроке мы проведем ряд экспериментов с эффектами при наведении курсора мыши на объект. Так как имеется свойство скругления углов рамки, то мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на страницах сайтов. Каждый может использовать их и особенно интересно смотрятся миниатюры круглой формы по сравнению с обычными прямоугольными изображениями. А так как круги являются такими особенными формами, то мы создадим несколько эффектов, проявляющихся при наведении курсора мыши на них!

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

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

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

JQuery Vertical Mega Menu Widget

Хоть в названии плагина и числится слово “мега”, с ним вы не сможете создать чего-то невозможного. Но простое вертикальное меню с собственными категориями любого плана при помощи модуля добавить на сайт вполне реально. Большой плюс JQuery Vertical Mega Menu Widget в том, что инструмент распространяется бесплатно. А значит без дополнительных затрат хоть сегодня вы сможете создать качественную менюшку для своего сайта.

JQuery Vertical Mega Menu Widget позволяет создавать виджет, всплывающее меню, вывод на экран которого можно всячески настраивать (меняя анимацию появления, перехода между категориями, вывод и т. д.). В итоге получится что-то похожее на accordion. Стиль его сможете настроить самостоятельно, редактируя классы CSS. И не забудьте во вкладке “Внешний вид” активировать виджет, и разместить его в определенной части сайта – иначе плагин JQuery Vertical Mega Menu Widget не сможет вывести accordion на страницу.

Плагин позволяет сделать разное, интересное и адаптивное меню для сайта. Всего модуль содержит три вариации менюшки:

горизонтальное;
вертикальное широкое;
вертикальный виджет.

Все три варианта с выходом последней версии плагина могут адаптироваться под мобильные устройства. Модуль совместим с WordPress 3.5+ и работает по простому принципу – настройка не займет много времени. Интегрируется в любую тему, так что ковыряться в CSS и коде шаблона не придется.

JQuery Mega Menu Widget

Еще один плагин из разряда Mega. Модуль JQuery Mega Menu Widget работает с использованием JQuery-библиотек – встраивает JavaScript в HTML. Вы сможете создать виджет, при наведении на который произойдет вывод выпадающих категорий.

JQuery Mega Menu Widget содержит множество настроек:

Hover/Click – настройка сценария реагирования меню (что будет после нажатия на определенную категорию);
Определение состава – произвольное количество категорий;
Оболочка – настройка внешнего облика с открытым кодом CSS, который можно настраивать;
Animation Effect – анимация появления категорий (можно выбрать скользящий эффект, либо добавить “исчезание”);
Animation Speed – изменение интенсивности анимационного эффекта;

Также этот Mega плагин позволяет деактивировать анимацию полностью и создать широкоформатное меню, автоматически подстраиваемое под пропорции шаблона. Возможно, это не совсем mega модуль, но скачать его можно бесплатно, и уже через 10-15 минут у вас на сайте появится виджет.

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

горизонтальное меню с картинками и субменю;
вертикальное в двух вариациях с разными иконками;
горизонтальное с иконками;
с круглыми картинками в категориях;
меню в виде png-кнопок;

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

Еще один jQuery-плагин, который позволяет создать многоуровневое функциональное меню для Вордпресс. Вы получите эстетически приятную округленную менюшку. Кнопки будут разделены спецификой CSS модуля. Сможете самостоятельно настроить стилевые классы, и сделать произвольное меню как раз под дизайн вашего ресурса. В дополнение jQuery Dropdown Menu доступна настройка цвета заднего фона, а также изменение размера и типа шрифтов для описания категорий. Это адаптивное меню.

Виджет работает только с CSS. В большей мере подходит для тех, кто разбирается в CSS, и хочет преобразить вывод уже существующего меню. С модулем Dropdown Menu Widget сможете создать ниспадающее произвольное меню с красивым дизайном. В модуле доступна настройка каждого отдельного элемента. Также имеются несколько стандартных тем CSS. Виджет позволяет сделать вертикальное или горизонтальное отображение многоуровневых категорий.

Ozh’ Admin Drop Down Menu

Этот инструмент не сможет добавить пользовательскую менюшку на сайт, но сделает меню для вебмастера. Модуль Ozh’ Admin Drop Down Menu предназначен для тех, кто устал постоянно заходить в панель администрирования WordPress в поисках нужной настройки. Плагин добавит невидимую для посетителей менюшку на страницах, которое можно будет удобно настроить для быстрого доступа к редактированию постов, добавлению медиа, созданию страниц и т. д.

Это флэш-меню. Разработчики не зря называют его динамическим – вертикальное меню работает с особыми анимационными эффектами. В итоге, сможете сделать адаптивное, стильное и удобное flash-menu. Цвет фона, текста, шрифт и размеры каждого элемента настраиваются в специальном разделе администрирования. Удобство менюшки для пользователя в первую очередь связано с возможностью остановить выбор категории во время скролла на страницах – то есть пользователю не придется постоянно открывать меню, если понадобилось прокрутить сайт.

Это необычная менюшка. Вы можете либо использовать ее в качестве стандартного меню для всего сайта, либо размещать его на отдельных страницах. Рассчитан плагин на использование на ресурсах ресторанов, кафе, баров и других заведений, где есть “Меню”. На проектах другой сферы деятельности использовать не рекомендуется – настройка под другие цели будет сложная.

Custom Taxonomies Menu Widget

Предельно простой плагин. Позволяет быстро создать плавающий виджет и вывести его сбоку экрана. Идеально подходит для блогосферы. Если вы пишите какой-то тематический блог, в котором множество терминов, и хотите обучать начинающих в этой сфере, тогда Custom Taxonomies Menu Widget вас выручит. Сможете сделать классифицированное иерархическое боковое меню с четкой категоризацией и отображением новых разделов. Порядок таксономии настраивается при помощи разных фильтров. Виджет этот бесплатный, и подходит только для обучающих порталов.

JQuery Accordion Menu Widget

Если хотите, чтобы у вас была accordion менюшка на ресурсе, то JQuery Accordion Menu Widget – лучший инструмент, чтобы осуществить эту задумку. Функции плагина JQuery Accordion Menu Widget:

добавление множества уровней менюшки;
произвольное число пунктов в accordion;
настройка перехода в категорию “по клику” либо “при наведении”;
встраивается в шаблон при помощи шорткодов;
возможность вывести один или несколько уровней менюшки accordion одновременно;
плагин JQuery Accordion Menu Widget может использовать куки-файлы пользователей, чтобы сохранять свое открытое/закрытое положение при переходе на страницы;
автоматическое закрытие меню accordion через секунду после удаления курсора с навигационной панели;
есть настройка отображения количества подпунктов в родительском меню;
можно настраивать и активировать классы CSS;
скорость анимации настраивается.

С последним пунктом будьте осторожны – низкая скорость анимации может уменьшить юзабилити инструмента.

Responsive Select Menu

Респектабельное и стильное меню. Удовлетворит потребности любого сайта, и быстро станет его украшением. А самое главное – Responsive Select Menu можно скачать бесплатно. Вывод менюшки можно будет организовать в любом положении: вертикальное, горизонтальное или в качестве виджета. Это полноценное адаптивное menu, в котором можно создать множество уровней разных форматов. Вы сможете добавить в менюшку кликабельные списки с описаниями подкатегорий, и даже встроить Google Maps с формами для регистрации! Стиль CSS полностью настраивается. Это не скучное стандартное меню, а инновационное и необыкновенное дополнение для вашего проекта!

JQuery Slick Menu Widget

Виджет, который размещается в любой части сайта. Вы получите стильное и аккуратное меню, вывод которого удобно настраивается при помощи различных типов анимации. Модуль JQuery Slick Menu Widget удобен тем, что с ним можно сделать адаптивное меню, которое будет следовать за пользователем, и содержание его может быть произвольное (от перечня главных рубрик портала до списка ссылок на группы социальных сетей). Инструмент предполагает настройку разных стилей CSS – в арсенале имеются 12 готовых вариантов дизайна и возможность самостоятельно их изменить. Вывод менюшки также настраивается, как и ее положение (вертикальное, динамичное, статичное и т. д.).

Fading Menu Plugin

Большинство указанных в обзоре плагинов являются бесплатными. Но Fading Menu Plugin – платный инструмент, и он заслуживает того, чтобы за его использование заплатили. С ним вы сможете добавить на сайт произвольное меню, которое будет закреплено сверху страницы. На первый взгляд кажется, что это мелочная функция. Но на деле оказывается, что закрепление менюшки в верхней позиции может значительно уменьшить число “отказов” (одного из параметров пользовательского поведения), а это позитивно повлияет на ваши позиции в поисковике.

Настройка Fading Menu Plugin не отличается особой сложностью – вывод и содержание менюшки сможете настроить в стандартной панели WordPress. В процессе настройки у вас будет выбор: добавить виджет в верхней панели или снизу. Рекомендуется добавлять сверху – в этой части сайта пользователи обычно проявляют большую активность. Не забудьте также настроить стилевые параметры. Важно не сделать плагин ярким и перенасыщенным, а удачно его совместить с текущим шаблоном Вордпресс вашего сайта. Если есть время и возможности, можно добавить собственные иконки для менюшки. И обязательно внесите в разделы модуля категории, в которой периодически будут появляться новые записи – Fading Menu Plugin позволяет отображать новые уведомления в шапке меню.

UberMenu

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

Вывод

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