• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

jQuery Vertical Mega Menu - плагин-виджет вертикального выпадающего меню

Stork.71

Гуру
Местный
#1
JQuery Vertical Mega Menu Widget - бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. Плагин предназначен для WordPress в целом, однако явно заточен под электронную коммерцию и может использоваться не только с WooCommerce, а и с другими плагинами для интернет-коммерции.
screenshot-4-jquery-vertical-mega-menu.png
Мне встречалось несколько разных плагинов для создания разного рода структурированных, выпадающих менюшек в сайдбаре, однако этот плагин выделяется. Большинство из них автоматически создает меню на основе блоговых записей и категорий, на основе даты и месяца. Удобно, если у вас просто блог.
Рассматриваемый же плагин позволяет создавать совершенно любые менюшки на основе страниц, товаров, категорий, меток - чего угодно! Это именно то, что надо для каталога товаров, хотя придется немного повозиться - пункты добавляются вручную.
После скачивания, установки и активации плагина первое, что надо сделать - это создать необходимое меню, которое будет отображаться посредством плагина. В настройках сайта идем на вкладку "Внешний вид" -> "Меню" и создаем новое - ну допустим "menu2". Дальше наполняем его как хотим, делаем вложенные пункты. Поэкспериментировать можно и потом, первым делом главное создать хоть что-нибудь. Каждый пункт делается вручную ссылкой. То есть, если вставить в меню страничку каталога, то ссылка на каталог работать будет, но позиции из каталога в меню автоматически не подтянуться. Для наибольшего эффекта рекомендуется делать трехуровневые пункты меню, тогда плагин наибольшим образом себя покажет.
screenshot-2.png
Когда меню создано, надо сделать так, чтобы плагин начал его отображать. Идем во "Внешний вид" -> "Виджеты", находим там новый виджет "jQuery Vertical Mega Menu" и помещаем его в нужное место на сайдбаре. Тут можно порыться немного в настройках, хотя главное сейчас - это выбрать наше предварительно созданное меню "menu2" и нажать "Сохранить". Меню создано, его можно просмотреть на сайте!

jQuery Vertical Mega Menu - Widget setup.jpg
В настройках меню можно задать заголовок, выбрать нужное меню для отображения, выбрать количество колонок в развернутом меню, направление разворачивания, эффекты и скорость анимации, цветовой скин. Демонстрацию работы плагина в разных сочетаниях настроек можно просмотреть на странице разработчиков.
Изначально в плагин зашито 8 разноцветных стилей.
screenshot-3-jquery-vertical-mega-menu-plugin.png
Однако отображение легко настраивается с помощью CSS (причем таблица CSS для каждого стиля своя, скопировал файлик white.css, переименовал в mybeststyle.css - вот тебе и новый скин "mybeststyle", который можно выбрать в настройках виджета ) и правкой фоновых картинок. Мне например пришлось вообще отказаться от использования картинок в качестве background'a в пользу простой цветовой заливки. К сожалению, из-за использования картинок менюшки отображались несколько некорректно, особенно когда пункт меню растягивался до двух строчек. Да и по цвету, по стилю мне родные скины не подходили. Немного терпения и знания CSS - и виджет изменяется как угодно, вплоть до добавления картинок.
Важный момент! Со многими темами плагин может сразу не заработать, но если внимательно читать readme, то разработчики рассказывают, как это лечится.
= The menu appears on the page and looks correct but I cant see the flyout menu? =
Make sure that your theme does not have the side column, where your menu is located, set to overflow: hidden in the style sheet file - this will hide the flyout menu
В вольном переводе - если основное меню отображается а выпадающее - нет, то проверьте, не установлено ли для сайдбара стилевое свойство overflow: hidden, которое как раз прячет все, что в сайдбар не помещается. Например, для темы Wootique это лечится добавлением в custom.css следующей строчки:
Код:
#sidebar{overflow:visible;}
В общем, немного терпения - и великолепный выпадающий каталог с товарами, а при желании - и с дополнительной информацией готов!
Скачать плагин JQuery Vertical Mega Menu Widget бесплатно можно здесь.
 
Последнее редактирование:

Zaknafain

Опытный
Местный
#2
JQuery Vertical Mega Menu Widget - бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. Плагин предназначен для WordPress в целом, однако явно заточен под электронную коммерцию и может использоваться не только с WooCommerce, а и с другими плагинами для интернет-коммерции.
Посмотреть вложение 350
Мне встречалось несколько разных плагинов для создания разного рода структурированных, выпадающих менюшек в сайдбаре, однако этот плагин выделяется. Большинство из них автоматически создает меню на основе блоговых записей и категорий, на основе даты и месяца. Удобно, если у вас просто блог.
Рассматриваемый же плагин позволяет создавать совершенно любые менюшки на основе страниц, товаров, категорий, меток - чего угодно! Это именно то, что надо для каталога товаров, хотя придется немного повозиться - пункты добавляются вручную.
После скачивания, установки и активации плагина первое, что надо сделать - это создать необходимое меню, которое будет отображаться посредством плагина. В настройках сайта идем на вкладку "Внешний вид" -> "Меню" и создаем новое - ну допустим "menu2". Дальше наполняем его как хотим, делаем вложенные пункты. Для наибольшего эффекта рекомендуется делать 3-х уровневые пункты меню, тогда плагин наибольшим образом себя покажет. Поэкспериментировать можно и потом, первым делом главное создать хоть что-нибудь.
Когда меню создано, надо сделать так, чтобы плагин начал его отображать. Идем во "Внешний вид" -> "Виджеты", находим там новый виджет "jQuery Vertical Mega Menu" и помещаем его в нужное место на сайдбаре. Тут можно порыться немного в настройках, хотя главное сейчас - это выбрать наше предварительно созданное меню "menu2" и нажать "Сохранить". Меню создано, его можно просмотреть на сайте!

Посмотреть вложение 348
В настройках меню можно задать заголовок, выбрать нужное меню для отображения, выбрать количество колонок в развернутом меню, направление разворачивания, эффекты и скорость анимации, цветовой скин. Демонстрацию работы плагина в разных сочетаниях настроек можно просмотреть на странице разработчиков.
Изначально в плагин зашито 8 разноцветных стилей.
Посмотреть вложение 349
Однако отображение легко настраивается с помощью CSS (причем таблица CSS для каждого стиля своя, скопировал файлик white.css, переименовал в mybeststyle.css - вот тебе и новый скин "mybeststyle", который можно выбрать в настройках виджета ) и правкой фоновых картинок. Мне например пришлось вообще отказаться от использования картинок в качестве background'a в пользу простой цветовой заливки. К сожалению, из-за использования картинок менюшки отображались несколько некорректно, особенно когда пункт меню растягивался до двух строчек. Да и по цвету, по стилю мне родные скины не подходили. Немного терпения и знания CSS - и виджет изменяется как угодно, вплоть до добавления картинок.
Важный момент! Со многими темами плагин может сразу не заработать, но если внимательно читать readme, то разработчики рассказывают, как это лечится.

В вольном переводе - если основное меню отображается а выпадающее - нет, то проверьте, не установлено ли для сайдбара стилевое свойство overflow: hidden, которое как раз прячет все, что в сайдбар не помещается. Например, для темы Wootique это лечится добавлением в custom.css следующей строчки:
Код:
#sidebar{overflow:visible;}
В общем, немного терпения - и великолепный выпадающий каталог с товарами, а при желании - и с дополнительной информацией готов!
Скачать плагин JQuery Vertical Mega Menu Widget бесплатно можно здесь.
добавил нужную строчку в custom.css темы вутик, но меню не выезжает почему то... да это снова я и снова с кучей вопросов )
 

Drm

Новичок
#5
Доброго времени суток, такая проблема возникла.

Стоит тема responsive


Данный плагин подходит по функционалу, но дело в том, что на этой теме он некорректно работает. Как он работает видно на этой странице: http://drm1804.s7.webhost1.ru/?post_type=product

Подскажите, в чем может быть проблема
 

ADv

Гуру
Местный
#6
Доброго времени суток, такая проблема возникла.

Стоит тема responsive


Данный плагин подходит по функционалу, но дело в том, что на этой теме он некорректно работает. Как он работает видно на этой странице: http://drm1804.s7.webhost1.ru/?post_type=product

Подскажите, в чем может быть проблема
Стили нужно править. Меню то работает, ссылки видно..
 

Drm

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

Стили в плагине, или стили в основном шаблоне?
 

ADv

Гуру
Местный
#8
Все поправимо. Ковыряйте стили
2.png
Я понимаю, что это не идеальный результат. Просто показал, что дело конкретно в CSS. А еще конкретней, в том, что Ваше jQuery меню берет стили вашего верхнего меню..
 

Drm

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

Sirojiddin

Форумчанин
#13
а как можно изменить внешний вид виджета?? дело в том что я не знаю работать с css кодами??? это мой первый интернет магазин.........
 

Drm

Новичок
#14
а как можно изменить внешний вид виджета?? дело в том что я не знаю работать с css кодами??? это мой первый интернет магазин.........
Изменяется вид с помощью таблицы стилей, но если Вы не знаете CSS, то необходимо обращаться к специалистам.
 

Drm

Новичок
#16
я понял....
у меня еще проблема у меня это в теме
Twenty Ten этот плагин неправильно работает ну дочерние элементы не выходят вот пример
http://www.ooo-skrepka.uz
Не совсем понял Вашу проблему. На сайте, который Вы показали в качестве примера все работает, но там стоит тема smartline-lite.
 

Sirojiddin

Форумчанин
#17
ну я изменил тему всё работает.....но на теме Twenty Ten и во всех темах woocomerce......не работает
я на пример на видео взял...
 
Последнее редактирование:

OniX

Форумчанин
#18
Хороший плагин, сталкивался с ним.
А не встречали как сделать выпадающее меню для категорий товаров woocommerce автоматически. Т.е. для стандартного виджета категорий товаров реализовать выпадающее меню. А то вручную меню делать не совсем удобно.
 

Stork.71

Гуру
Местный
#19
Когда-то попадались кажется, но мне на тот момент не понравились. Предпочитаю вручную :) Ищите! ;)
 

OniX

Форумчанин
#20
Вот нашел WooCommerce Categories Menu
В принципе делает что надо, остальное можно стилями допилить.
Хотелось бы еще аккордеон реализовать :)