Вертикальное меню-аккордеон

+11
1.4K

Дополнительный шаблон для отображения меню в виде вертикального аккордеона. Умеет принимать все системные настройки родного виджета «Меню»

Имеет 5 цветовых схем: black, white, red, green, blue — укажите нужный класс в CSS класс контейнера пунктов меню.

Выглядит так:

Изображение

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

  1. .новый_класс.jquery-accordion-menu .jquery-accordion-menu-footer,.новый_класс.jquery-accordion-menu .jquery-accordion-menu-header,.новый_класс.jquery-accordion-menu ul li a {
  2. background: #ваш_цвет
  3. }
  4.  
  5. .новый_класс.jquery-accordion-menu>ul>li.active>a,.blue.jquery-accordion-menu>ul>li:hover>a {
  6. background: #ваш_цвет
  7. }
  8. .новый_класс.jquery-accordion-menu>ul>li>a {
  9. border-bottom-color: #ваш_цвет
  10. }
  11.  
  12. .новый_класс.jquery-accordion-menu ul ul.submenu li:hover>a {
  13. border-left-color: #ваш_цвет
  14. }

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

Демо: pacific.temphub.ru/

UPD: Исправлена проблема со свайпом на мобильных устройствах

Скинуть на пиво можно на этот кошелек:  4100117625208247

Прикреплённый файл:
Скачать 11 Кбскачан 38 раз
+1
RSN RSN 2 года назад #

Спасибо, для меня нужная штука… «на пиво» отправил)

0
Алексей Т Алексей Т 2 года назад #

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

+1
Make Make 2 года назад #

Ок, поправлю

0
oscar oscar 2 года назад #

Добрый вечер, еще заметил если вывести 2  блока, пропадает аккордеон.

0
Make Make 2 года назад #

Подробнее пожалуйста. О каких двух блоках идет речь? О двух виджетах меню? 

0
oscar oscar 2 года назад #

Ага, два виджета когда выводишь

Изображение

0
Алексей Т Алексей Т 2 года назад #

Если ставить два виджета аккордеона то скрипты конфликтуют между собой 

0
Сергей Сергеевич Сергей Сергеевич 2 года назад #

Идентификаторы должны быть уникальными. На второй картинке как исправить. Логично, что $widget->id будет уникален для каждого виджета, а соответственно и формируемый таким образом идентификатор.

Изображение

Изображение

0
Abobo Abobo 2 года назад #

Прописал white — как был черный так и остался...

Изображение

+1
Make Make 2 года назад #

Не туда прописываете. Правильно — в CSS класс контейнера пунктов меню

Изображение

+1
Make Make 2 года назад #

И еще -  судя по скриншоту вы используете виджет категорий. Но пишите о проблеме в тему о меню.

0
Abobo Abobo 2 года назад #

разобрался голова моя садовая :) 

Эх, но так нужно именно для категорий такой виджет...

Можно ли как-то адаптировать и для категорий ?

+1
Make Make 2 года назад #

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

+1
Abobo Abobo 2 года назад #

было бы шикарно. Спасибо за такой приятный виджет :)

0
rshabalin rshabalin 2 года назад #

Создать меню с ссылками на категории и выбрать это меню для отображения как вариант 

+1
Make Make 2 года назад #

Выглядит нелогично) Категории — это категории, меню — это меню.

+1
rshabalin rshabalin 2 года назад #

Это я так на первое время предложил)

0
Алексей Т Алексей Т 2 года назад #

Изображение

0
Make Make 2 года назад #

Ищите дублирующие классы в вашем шаблоне

Еще от автора

Бесплатный компонент - управление страницами 404
Простой компонент, который позволяет переопределить настройки дефолтной страницы 404, а также установить новую на выбор из двух представленных шаблоно
User-Panel v.1.0.4
Большое обновление виджета, множество улучшений, а также дополнительный запланированный функционал.
User-панель. Функциональное меню для вашего сайта
Виджет, который позволит вывести на вашем сайте функциональную панель с различными настройками.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.