< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Joomla » Вертикально-выпадающее меню аккордеон для Joomla 2.5.x — 3.x.x

Вертикально-выпадающее меню аккордеон для Joomla 2.5.x — 3.x.x

Вертикально-выпадающее меню аккордеон для Joomla 2.5-3.0

Здравствуйте друзья! На связи Заур Магомедов. В данной заметке хочу представить вам симпатичное вертикальное аккордеон меню для сайта на Joomla 2.5 — 3.0 . Данное меню очень простое и не требует внедрения большого кода, на что я очень часто обращаю внимание. Как говорится — «Лучше меньше, да лучше».

Мы уже рассматривали в предыдущих постах создание горизонтального меню и создание горизонтального многоуровневого меню для joomla 2.5. Вот теперь добрались и до вертикального.

Для начала посмотрите демо, как это все выглядит, если нравится, то качаем пакет с исходными файлами.

Я нашел данное меню в интернете и решил адаптировать его для сайта на cms Joomla, т.к. мне самому данное меню очень понравилось, как по внешнему виду, так и по легкости подключения. Слегка подправив скрипт самого меню и стили css, получил такой вот результат как на демо-сайте.

Подключение меню в joomla 3.x.x

Первым делом распаковываем архив в определенную папку на вашем компьютере. Следующее, что мы сделаем это скопируем картинки из папки images в папку картинок вашего шаблона. Обычно во многих шаблонах это папка images, если она у вас называется иначе, например, img, то вы должны изменить пути до картинок в файле стилей — vmenu.css.  Также нам необходимо подключить один из скриптов меню. Я предлагаю создать в корне вашего шаблона папку «js» и положить в нее файлы скриптов — menu.js или menu-collapsed.js. Почему два файла? Дело в том, что, если вы заметили, на демо-сайте есть два варианта отображения данного меню. Можете внимательно посмотреть чем они отличаются друг от друга. Подключаем понравившийся вариант скрипта menu.js или menu-collapsed.js. Вариант 1 — это скрипт menu-collapsed.js, а вариант 2 — это menu.js. Для этого в самом начале файла index.php шаблона вставим следующие строки:

<?php
$doc = JFactory::getDocument(); // получаем параметры 
$doc->addStyleSheet(JUri::base().'/templates/'.$this->template.'/css/vmenu.css'); // подключаем файл стилей
$doc->addScript(JUri::base().'/templates/'.$this->template.'/js/menu-collapsed.js'); // подключаем скрипт меню, в данном случае это вариант 1
?>

Нам также необходима библиотека jQuery, но в joomla3 она подключена уже по умолчанию, т.к. используется фреймворк twitter bootstrap.

Итак, файл css содержит в себе следующий код:

 /********************************
         Вертикально-выпадающее меню аккордеон
************************************************************/
ul.vmenu {
    font: bold 12px Arial,Helvetica,sans-serif;
    list-style: none outside none;
    margin: 0;
    padding: 0;
	list-style:none;
}
ul.vmenu li {	
    margin: 0 0 2px;
}
ul.vmenu li a {
background: url("../images/vmenu-li-bg.jpg") left bottom repeat-x;    
    border: 1px solid #D5D5D5;    
	  -moz-border-radius: 3px;
    	-o-border-radius: 3px;
   -webkit-border-radius: 3px;
	   -ms-border-radius: 3px;
	       border-radius: 3px;
    color: #515151;
    display: block;
    padding: 5px 8px;
    text-decoration: none;
}
ul.vmenu li > a:hover, ul.vmenu li.active > a, ul.vmenu li > a:focus {background-color:transparent; color:#0088CC}
ul.vmenu li.parent > a:after {
	background:url("../images/arrow-dropdown.png") no-repeat;
	display:block;
	content:"";
	float:right;
	margin:8px 5px 0 0;
	height:3px;
	width:6px;
}
/* Выпадающие пункты */
ul.vmenu li ul {
    font-weight: normal;
    margin: 10px 0 10px 15px;
	list-style:none;
}
ul.vmenu li ul li {
	background:none;
	margin:0 0 5px
}
ul.vmenu li ul li a {
    background: url("../images/vmenu-arrow.png") no-repeat scroll 5px center transparent !important;
    border: medium none;
    padding: 0 0 0 15px;
}
ul.vmenu li ul li a:hover {color:#29719E;text-decoration:underline}
ul.vmenu li ul li.active a {color:#29719E;font-weight:bold}


/*********************
         Вертикально-выпадающее меню аккордеон - вариант 2
************************************************************************/
ul.vmenu2 {
    font: bold 12px Arial,Helvetica,sans-serif;
    list-style: none outside none;
    margin: 0;
    padding: 0;
	list-style:none;
}
ul.vmenu2 li {	
    margin: 0 0 2px;
}
ul.vmenu2 li a {
background: url("../images/vmenu-li-bg.jpg") left bottom repeat-x;    
    border: 1px solid #D5D5D5;    
	  -moz-border-radius: 3px;
    	-o-border-radius: 3px;
   -webkit-border-radius: 3px;
	   -ms-border-radius: 3px;
	       border-radius: 3px;
    color: #515151;
    display: block;
    padding: 5px 8px;
    text-decoration: none;
}
ul.vmenu2 li > a:hover, ul.vmenu2 li.active > a, ul.vmenu2 li > a:focus {background-color:transparent; color:#0088CC}
ul.vmenu2 li.parent > a:after {
	background:url("../images/arrow-dropdown.png") no-repeat;
	display:block;
	content:"";
	float:right;
	margin:8px 5px 0 0;
	height:3px;
	width:6px;
}
/* Выпадающие пункты */
ul.vmenu2 li ul {
    font-weight: normal;
    margin: 10px 0 10px 15px;
	list-style:none;
}
ul.vmenu2 li ul li {
	background:none;
	margin:0 0 5px
}
ul.vmenu2 li ul li a {
    background: url("../images/vmenu-arrow.png") no-repeat scroll 5px center transparent !important;
    border: medium none;
    padding: 0 0 0 15px;
}
ul.vmenu2 li ul li a:hover {color:#29719E;text-decoration:underline}
ul.vmenu2 li ul li.active a {color:#29719E;font-weight:bold}

В данном файле содержатся стили обоих вариантов и вы можете удалить стили ненужного вам варианта меню.

Читайте также:  Страница 404 в Joomla 3. Как создать страницу 404-ой ошибки средствами Joomla?

Теперь идем в панель управления joomla и создаем меню:  Меню -> Менеджер меню -> Создать меню. Создаете меню, даете заголовок и машинное имя.

Создание меню в joomla 3

Далее создаете пункты меню для созданного меню, соблюдая вложенность. Хотел бы обратить внимание на тот факт, что вложенность пунктов должна быть не более 1, т.е. уровень — 0, это корень меню, уровень 1 — это дочерние пункты, т.к. мы здесь рассматриваем не многоуровневое меню. И еще, чтобы в адресах сайта не было никаких цифр для родительских пунктов при включенном sef выбираем тип — Системные ссылки -> Заголовок.

Тип пункта меню joomla 3 - Заголовок. Вертикально-выпадающее меню аккордеон для Joomla 2.5-3.0

У меня получилось примерно следующее дерево.

Дерево пунктов меню joomla 3. Вертикально-выпадающее меню аккордеон для Joomla 2.5-3.0

Теперь, когда у нас все пункты созданы мы можем создать модуль с помощью которого будем выводить наше меню в той или иной модульной позиции шаблона. Я выбрал левую колонку. Переходим в менеджер меню и кликаем по ссылке «Добавить модуль для данного типа меню» напротив нашего созданного меню. Также модуль меню можно создать и следующим образом — идем в менеджер модулей: Расширения -> Менеджер модулей -> Создать -> Меню (выбираем тип модуля).

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

Настройки модуля меню в joomla 3. Вертикально-выпадающее меню аккордеон для Joomla 2.5-3.0

Переходим во вкладку «Дополнительные параметры». Здесь ВВОДИМ ПРОБЕЛ и вставляем суффикс класса меню — vmenu. Для чего это нужно? На сайте ведь может быть не одно меню и чтобы стили их не пересекались вводим альтернативный класс ненумерованному списку меню. Если вам понравился второй вариант отображения меню, то в качестве суффикса также через пробел вводим — vmenu2.

Суффикс класса меню в joomla 3.

Все, после сделанных настроек сохраняем модуль. Если сделали все правильно у вас на сайте появится меню, похожее на то, что на демо-сайте.

Читайте также:  Как сделать резервную копию сайта на joomla 3? Akeeba backup - резервная копия сайта по шагам в картинках

Еще раз напомню! На демо-сайте два варианта меню и наверняка вы выберите один из них. В таком случае нет необходимости подключать оба файла скрипта, достаточно только одного.

  • Файл menu-collapsed.js. — это у нас вариант 1 — Меню аккордеон — вариант 1
  • Файл menu.js — это у нас вариант 2 — Меню аккордеон — вариант 2
  • Суффикс класса меню (через пробел) для варианта 1 — vmenu
  • Суффикс класса меню (через пробел) для варианта 2 — vmenu2

Исходя из этого, подключаете нужный вам файл. Также в файле css можно удалить стили для ненужного нам варианта, чтобы не грузить лишний раз лишние килобайты.

Подключение меню в joomla 2.5.x

Подключение меню в joomla 2.5 ничем не отличается от подключения в joomla 3, за исключением того, что нам необходимо подключить еще дополнительно библиотеку jQuery. Для этого в вышеприведенный код добавляете следующую строчку:

<?php 
$doc->addScript('http://code.jquery.com/jquery-latest.min.js'); //подключаем последнюю версию библиотеки jQuery 
?>

У нас получится примерно следующее:

<?php 
$doc = JFactory::getDocument(); //получаем параметры 
$doc->addScript('http://code.jquery.com/jquery-latest.min.js'); //подключаем последнюю версию библиотеки jQuery
$doc->addScript(JUri::base().'/templates/'.$this->template.'/js/menu-collapsed.js'); //подключаем скрипт меню, в данном случае это вариант 1
?>

И еще кое что. В joomla 2.5 нет тип пункта меню Системные ссылки -> Заголовок, там есть только тип текстовый разделитель — Разделитель, но такой тип пункта нам не подойдет, т.к. заголовок пункта меню не будет обрамлен ссылкой. В данном случае вам необходимо выбрать тип «Внешний URl» и в качестве урл вставить заглушку — #. Все остальное тоже самое.

Вот и все, что хотел сказать. Если что то не получается (возможно и я где то ошибся в тексте), то задаем вопросы в комментариях. Всем пока, до встречи в следующих постах!

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (19 оценок, среднее: 2,53 из 5)
Загрузка...

Проверка орфографии

Система Orphus

284 комментариев к статье "Вертикально-выпадающее меню аккордеон для Joomla 2.5.x — 3.x.x"

  • Вася Янв 21, 2015 в 10:22

    Спасибо. Очень помогло ☺☺☺

  • Виктор Янв 20, 2015 в 23:45

    Доброе время суток.
    Что-то пошло не так. И якобы делал все по прописи и ничего не получилось. То ли все-таки не там и не так шо то делаю. Думал даже подключить меню через такие строки, как
    $document = & JFactory::getDocument();
    $renderer = $document->loadRenderer(‘modules’);
    $options = array(‘style’ => ‘xhtml’);
    $position = ‘bar-banners’;
    echo $renderer->render($position, $options, null);
    В принципе то же, разве что скрипты вынести в отдельные строки

    и все-таки — вставить в начале файла индекс, может шо то не там и не туду устанавливаю?

    • Заур Магомедов
      Заур Магомедов Янв 21, 2015 в 10:49

      Не пойму, а в чем у вас проблема? Меню не работает что ли?

  • Дмитрий Дек 22, 2014 в 21:01

    и еще как присвоить класс раскрытому пункту меню, не активному, а именно раскрытому?
    спасибо

    • Заур Магомедов
      Заур Магомедов Дек 22, 2014 в 22:52

      А это уже манипуляции с jQuery. Класс должен не просто присваиваться, он еще должен удаляться, когда раскрываешь следующий пункт, т.е. одной строчкой кода тут не обойтись.

  • Дмитрий Дек 22, 2014 в 20:25

    приветствую, можно ли как-то ссылки обернуть в div? как сделать чтобы название пункта меню (однострочное или же двухстрочное) было расположено по центру кнопки вертикально?
    вот пример fotki.yandex.ru/users/ya-belpar/view/925475

    • Заур Магомедов
      Заур Магомедов Дек 22, 2014 в 22:49

      Можно, но это уже упирается в знания сss.

  • Дмитрий Дек 20, 2014 в 22:49

    Добрый день, Заур.
    Подскажите, можно ли сделать, чтобы родительские элементы меню были активными, т.е. к родительскому меню прикреплен материал и при нажатии происходил переход в материал и разворачивался список вложенных меню?
    Спасибо.

    • Заур Магомедов
      Заур Магомедов Дек 20, 2014 в 23:03

      Здравствуйте! Можно, но если пункт не будет ссылаться на материал, то он будет прыгать вверх. В коде скрипта закомментируйте или удалите строчку — return false.

      • Дмитрий Дек 20, 2014 в 23:08

        Спасибо Вам за быстрый ответ.
        В данном случае пункты меню будут ссылаться на материал, именно то, что нужно )

  • Luna Дек 15, 2014 в 10:23

    Заур, спасибо за помощь. Все получилось.

    • Заур Магомедов
      Заур Магомедов Дек 15, 2014 в 13:31

      Не за что!

  • Luna Дек 11, 2014 в 12:53

    Здравствуйте, Заур. Загрузила меню на сайт http://j19.itisperfect.ru/. В Мазиле работает прекрасно. В Хроме и Опере не отражается. В чем может быть проблема?

    • Заур Магомедов
      Заур Магомедов Дек 11, 2014 в 13:20

      Здравствуйте!
      Зачем вы li задаете правило — content?

      ul.vmenu li {
      margin: 0 0 2px;
      content: url(«../images/buh_uslugi.gif»);
      }

      Правило — content — задается псевдо-элементам. Удалите данное правило.

  • алекс Окт 26, 2014 в 23:25

    Хочу к Virtuemart2 прикрутить.

    Все меню придется в ручную создавать в разделе меню? или при указании категории VM2 он все категории из vm. перенесет в раздел меню,

    • Заур Магомедов
      Заур Магомедов Ноя 01, 2014 в 9:47

      Вам лучше поискать готовый модуль аккордеон категорий VM. Можно конечно и через меню создать, если у вас не много категорий.

  • Ирина Авг 30, 2014 в 2:52

    Спасибо!
    Идеальное меню для моих задач!
    Подскажите, а как в этом меню сделать, чтобы каждый пункт был разного цвета?
    Сама пыталась, но не получилось…

    • Заур Магомедов
      Заур Магомедов Авг 30, 2014 в 13:49

      У пунктов меню joomla имеются уникальные классы. Вот, используя данные классы задайте им разное оформление. Это уже чистый css.

  • Эрика Апр 29, 2014 в 13:00

    Здравствуйте, Заур.
    Подскажите пожалуйста, а как из категорий в joomshopping сделать такое меню? Спасибо!

    • Заур Магомедов
      Заур Магомедов Апр 29, 2014 в 13:06

      Вот уже готовое меню аккордеон категорий для joomshopping — http://yadi.sk/d/Vm2IJBnDNdSMz Сам часто использую его. В админке можно отключить стили модуля и в своем файле стилей написать свои.

      • Эрика Апр 29, 2014 в 13:11

        Попробовала, но не получилось реализовать его.
        http://savepic.org/5403978.png

        • Заур Магомедов
          Заур Магомедов Апр 29, 2014 в 13:14

          Версия joomla какая?

          • Эрика Апр 29, 2014 в 13:15

            joomla 2.5.19 — joomshopping 3.16.4? сорри сразу не сказала.

            • Заур Магомедов
              Заур Магомедов Апр 29, 2014 в 13:17

              Вот это попробуйте тогда — http://yadi.sk/d/-qTVGPipNdVJ4

              • Эрика Апр 29, 2014 в 13:22

                А этот растянул всю страницу
                http://savepic.org/5432652.png

              • Эрика Апр 29, 2014 в 13:25

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

              • Эрика Апр 29, 2014 в 13:33

                Заур, спасибо! Разобралась со вторым. Хочется конечно первый вариант модуля чтобы был на сайте. Если сможете подсказать в чем ошибка, буду благодарна!

                • Заур Магомедов
                  Заур Магомедов Апр 29, 2014 в 13:40

                  Вы про какой первый вариант говорите?

              • Эрика Апр 29, 2014 в 14:10

                Вот этот — http://yadi.sk/d/Vm2IJBnDNdSMz как на этом сайте http://lin-kov.ru
                Или его просто стилями сделали?

                • Заур Магомедов
                  Заур Магомедов Апр 29, 2014 в 14:12

                  Это мои стили. Я ж говорю в настройках можно отключить стили модуля и писать свои.

              • Эрика Апр 29, 2014 в 14:13

                Все поняла, спасибо еще раз!

                • Заур Магомедов
                  Заур Магомедов Апр 29, 2014 в 14:14

                  Не за что…

  • Иван Апр 14, 2014 в 19:15

    Спасибо Заур, хорошее меню! скажите у меня при 3 уровне меню при клике оно автоматически закрывается, можно как нибудь исправить? заранее спасибо

    • Заур Магомедов
      Заур Магомедов Апр 14, 2014 в 21:52

      Можно. Я уже реализовал такое. Нужно и здесь обновить.

  • Евгений Апр 12, 2014 в 22:56

    А можно сделать в меню в 1 варианте так что бы при активном материале был открыт только 1 подкатегория,а не все…
    приложу скриншот http://rghost.ru/54047749.view

    • Заур Магомедов
      Заур Магомедов Апр 12, 2014 в 23:22

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

      • Евгений Апр 12, 2014 в 23:37

        Да нет вроде конфликтов нету…

      • Евгений Апр 12, 2014 в 23:46

        а как узнать конфликт,но то что подключены 100%

        • Заур Магомедов
          Заур Магомедов Апр 12, 2014 в 23:51

          У вас пункты все раскрыты, это и говорит, что скрипты не работают. А jQuery подключили? Какая версия joomla у вас вообще?

          • Евгений Апр 13, 2014 в 0:10

            Джумла 2.5

          • Евгений Апр 13, 2014 в 0:11

            «http://angel-loves.com//templates/angellov/js/menu-collapsed.js»
            подключен скрипт

            • Заур Магомедов
              Заур Магомедов Апр 13, 2014 в 0:29

              Скрипт то у вас подключен, а библиотеку jQuery подключили?

              • Евгений Апр 13, 2014 в 13:08

                src=»/templates/js/jquery-1.5.1.js»>

                • Заур Магомедов
                  Заур Магомедов Апр 13, 2014 в 17:57

                  А где название шаблона в пути? У вас скорее всего неправильный путь. Подключите jQuery так, как написано в данной статье именно для joomla 2.5. Ищите строчки: Подключение меню в joomla 2.5.x

              • Евгений Апр 13, 2014 в 17:43

                подключена библеотека только из шаблона)но почему не работает меню не знаю(

              • Евгений Апр 13, 2014 в 18:16

                $doc->addScript(JUri::base().’/templates/’.$this->template.’/js/jquery-1.5.1.js’); моя библиотека…И все равно открывают всё меню)

                • Заур Магомедов
                  Заур Магомедов Апр 13, 2014 в 18:41

                  Подключите именно эту строчку — $doc->addScript(‘http://code.jquery.com/jquery-latest.min.js’);
                  Зачем вам 1.5.1.?????

              • Евгений Апр 13, 2014 в 18:55

                ПОдключил,все равно открывает все подпункты

                • Заур Магомедов
                  Заур Магомедов Апр 14, 2014 в 0:26

                  Дайте ссылку на сайт, так ничего сказать не могу.

              • Евгений Апр 14, 2014 в 20:54
                • Заур Магомедов
                  Заур Магомедов Апр 14, 2014 в 21:54

                  У вас меню работает, просто у вас меню имеет больше двух уровней вложенности, а на это меню данное не рассчитано. Сделаю доработку и выложу для более уровней.

              • Евгений Апр 14, 2014 в 21:56

                А сможете скинуть на почту?

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]