→ При разработке сайта лендинг в подарок! ЖМИ! ←
Янв
7

Меню аккордеон для Joomla 2.5 на базе стандартного модуля

Author Eduard    Category Joomla     Tags

Искал модуль меню аккордеона для Joomla 2.5. Как обычно, всё что находилось, было дольше адаптировать, чем сделать самому. Главная лажа этих модулей — нет запоминания состояния меню, что сводит на «нет» использование на серьезных проектах. Поэтому решил сделать сам меню аккордеон на Джумле 2.5 с запоминанием состояния. Используется jQuery.

Для начала подключаем jQuery (если у вас не подключен ещё).

1
2
<script type="text/javascript" src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

Затем берем мою JS заготовку меню

1
2
3
4
5
6
7
8
9
10
function initMenu() {
  jQuery('.menu ul').hide();
  jQuery('.menu li.active ul').show();
  jQuery('.menu li .separator').click(
    function() {
        jQuery(this).next().slideToggle('normal'); 
      }
    );
  }
jQuery(document).ready(function() {initMenu();});

здесь

  • jQuery(‘.menu ul’).hide(); — скрывает вложенные пункты меню
  • jQuery(‘.menu li.active ul’).show(); — раскрывает активный блок
  • jQuery(‘.menu li .separator’).click( — обработчик клика на пункт меню «разделитель»

Для того, чтобы меню заработало, родительские элементы нужно сделать типом меню «Разделитель»:

razdelitelmenu

Это уберет ссылку из родительского элемента, заменит её на <span class=»separator»>текст</span>. В нашем JS скрипте меню аккордеона как раз и описывается событие клика на сепаратор.

Последнее, нужно оформить сепаратор как ссылку. Для этого в CSS файл темы добавим простую строчку:

1
.separator {cursor: pointer;}

Вот и всё! У нас готово отличное меню аккордеон для Joomla 2.5 с запоминанием позиции на JS, CSS без лишней нагрузки на сайт.

5 коммент. к записи “Меню аккордеон для Joomla 2.5 на базе стандартного модуля”

  • Анатолий 28 февраля 2015 - 11:39

    Не работает

  • Eduard 28 февраля 2015 - 11:45

    Работает на нескольких проектах у нас. Ищите ошибки у себя

  • Анатолий 28 февраля 2015 - 12:59

    При нажатии на родительский блок — разворачиваются дочерние, но сразу же сворачиваются.

  • Илья 21 мая 2015 - 11:45

    Офигенное решение, спасибо вам!
    Прошу тока помочь как седлать так что если открыт один пункт (первый) меню при нажатии на другой чтоб первый сворачивался??

  • Eduard 22 мая 2015 - 14:03

    вам нужно отслеживать состояние и по клику сначала сворачивать все пункты, а затем уже разворачивать нужный

Прокомментировать

Рубрики

Наши услуги

В прямом эфире