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

+11
1.17K

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

Имеет 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 Кбскачан 33 раза
+1
RSN RSN 1 год назад #

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

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

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

Make Make 1 год назад #
Комментарий удален
0
oscar oscar 1 год назад #

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

Make Make 1 год назад #
Комментарий удален
0
oscar oscar 1 год назад #

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

Изображение

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

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

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

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

Изображение

Изображение

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

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

Изображение

Make Make 1 год назад #
Комментарий удален
Make Make 1 год назад #
Комментарий удален
0
Abobo Abobo 1 год назад #

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

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

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

Make Make 1 год назад #
Комментарий удален
+1
Abobo Abobo 1 год назад #

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

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

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

Make Make 1 год назад #
Комментарий удален
+1
rshabalin rshabalin 1 год назад #

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

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

Изображение

Make Make 1 год назад #
Комментарий удален

Еще от автора

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