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

+9
458

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

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

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

0
Алексей Т Алексей Т 1 месяц назад #

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

+1
Make Make 1 месяц назад #

Ок, поправлю

0
oscar oscar 1 месяц назад #

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

0
Make Make 1 месяц назад #

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

0
oscar oscar 1 месяц назад #

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

Изображение

0
Алексей Т Алексей Т 1 месяц назад #

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

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

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

Изображение

Изображение

0
talerbiz talerbiz 20 дней назад #

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

Изображение

+1
Make Make 20 дней назад #

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

Изображение

+1
Make Make 20 дней назад #

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

0
talerbiz talerbiz 20 дней назад #

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

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

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

+1
Make Make 20 дней назад #

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

+1
talerbiz talerbiz 20 дней назад #

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

0
rshabalin rshabalin 20 дней назад #

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

+1
Make Make 20 дней назад #

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

+1
rshabalin rshabalin 19 дней назад #

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

0
Алексей Т Алексей Т 18 дней назад #

Изображение

0
Make Make 18 дней назад #

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

Еще от автора

Дополнительный шаблон для вывода категорий в виде аккордеона
​Небольшой шаблон для вывода категорий в виде аккордеона. Поставляется как дополнительный шаблон вывода для системного виджета "Категории контента".
Вкладки с информацией
Простой виджет, который позволит вывести на сайте вкладки с вашей информацией.
InstantCMS - организация рекламной кампании
Уже больше года я брежу идеей популяризации любимого движка.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.