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

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

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

Заур Магомедов
Главная » 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}

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

Читайте также:  Как выровнять горизонтальное меню по центру?

Теперь идем в панель управления 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.

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

Читайте также:  Компонент Xmap - карта сайта для joomla 2.5, joomla 3.0

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

  • Файл 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"

  • Артём Окт 12, 2016 в 1:30

    Подскажите, как можно сделать так, чтобы при клике по какому либо подпункту меню и последующем обновлении странцы, список подпунктов не сворачивался?

    В вашем примере это происходит только при клике на первый подпункт меню.

    • Заур Магомедов
      Заур Магомедов Окт 12, 2016 в 1:35

      Так оно и не должно сворачиваться. Главное условие — у активного родительского пункта должен быть класс — active. Тогда все должно работать как надо.

    • Артём Окт 12, 2016 в 1:36

      Вопрос решился добавлением в коде скрипта строчки —

       jQuery('.vmenu2 li.alias-parent-active ul').show(); 

      .
      Благодарю за предоставленное решение!

      • Заур Магомедов
        Заур Магомедов Окт 12, 2016 в 1:41

        Скорее всего вы не меню joomla использовали, потому что в меню joomla активный родитель помечается классом active. Хотя возможно я ещё старый шаблон использую. Надо бы посмотреть…

        Не за что!

        • Артём Окт 12, 2016 в 2:34

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

  • Саша Окт 11, 2016 в 22:48

    Отличное меню!!!! Только как сделать, чтобы оно не разворачивалось при обновлении страницы и когда вообще кликаешь на другие ссылки сайта. У меня второй аккордеон. Хочу чтобы меню разворачивались только при клике на сам аккордеон. подскажите пожалуйста.

    • Заур Магомедов
      Заур Магомедов Окт 12, 2016 в 0:14

      Чтобы использовать два аккордеона надо либо классы поменять в html и js-коде меню, либо оформить код аккордеона в виде плагина и вызывать для каждого аккордеона.

      • саня Окт 12, 2016 в 8:00

        У меня не два аккордеона, а Меню аккордеон — вариант 2. Меню всего одно на сайте. В меню 40 пунктов. И они все на секунду раскрываются, а потом закрываются. У вас на Дэмо примере меню так же — моргает. Как от этого избавиться? Чтобы оно было не разворачивалось.

        • Заур Магомедов
          Заур Магомедов Окт 12, 2016 в 10:25

          Я вас понял. Для этого просто в файл стилей можно добавить:

          ul.vmenu2 ul {
              display: none;
          }
          

          или

          ul.vmenu ul {
              display: none;
          }
          

          Смотрите демо.

          • саня Окт 12, 2016 в 11:05

            Отлично!!! Огромное спасибо!!!

            • Заур Магомедов
              Заур Магомедов Окт 12, 2016 в 12:43

              Не за что!

  • Лилия Сен 21, 2016 в 16:29

    А как пункты меню сделать всегда раскрытыми? (для джумлы 1.5 это было простейшее действие а тут уже неделю ищу ответа 🙁 )
    «Показывать подпункты меню» не дает результата 🙁

    • Заур Магомедов
      Заур Магомедов Сен 21, 2016 в 21:54

      А какой тогда смысл в аккордеоне, если хотите все пункты раскрытыми делать? Подключите просто стили из статьи и все, без кода js.

  • Автор Сен 20, 2016 в 18:29

    Добрый день подскажите, как скрыть модуль с vmenu от мобильных?

    • Заур Магомедов
      Заур Магомедов Сен 21, 2016 в 0:06

      Здравствуйте!

      В css, с помощью медиа-запросов:

      @media (max-width: 480px) {
          .vmenu {
              display: none
          }
      }
      
  • Анзур Сен 09, 2016 в 12:37

    при подключении скриптов у меня лишние слэши

    • Заур Магомедов
      Заур Магомедов Сен 09, 2016 в 18:56

      Ну, удалите лишние.

  • Рустам Кодзоев Сен 03, 2016 в 2:42

    Добрый день! Все делаю как в статье но что не получается пожалуйста посмотрите в чем может быть проблема мой сайт mfc06. ru

  • Артур Июл 17, 2016 в 22:49

    Это всё интересно, но в современном мире скоростей этим будут заморачиваться лишь единицы. Не лучше ли создать плагин??

    • Заур Магомедов
      Заур Магомедов Июл 18, 2016 в 11:09

      Зачем лишний раз использовать плагин для такой элементарной задачи.

      • Артур Июл 18, 2016 в 13:08

        Фига се элементарной! Исходный код шаблона из-за этой «элементарной задачи» приходится править, заливать файлы, всё вручную. Ради удобства хотя бы сделать плагин.
        Как отписаться от новых сообщений? А то мне из-за любого коммента теперь почта присылается, а отписки там не предусмотрено почему-то.

        • Заур Магомедов
          Заур Магомедов Июл 19, 2016 в 14:15

          Я вас уверяю ничего сложного нет. По поводу плагинов — в сети их миллионы.
          Отписал вас от новых комментариев.

  • Ольга Июл 11, 2016 в 16:54

    Здравствуйте. не получается подключить скрипт.Joomla 3.5
    в index.php заношу строки
    после
    require_once(‘lib/gk.framework.php’);
    require_once(‘lib/framework/gk.const.php’);

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

    • Заур Магомедов
      Заур Магомедов Июл 11, 2016 в 17:09

      А какую ошибку выдает?

  • Роман Июн 30, 2016 в 19:33

    Здравствуйте. На Joomla 3.5.1 не хочет работать. При клике на родительский пункт меню ничего не происходит. Всё сделано по вашему описанию. Пробовал подключать скрипт разными способами
    1)<script type="text/javascript" src="baseurl ?>/templates/template ?>/js/menu-collapsed.js»>
    2)addStyleSheet(JUri::base().’/templates/’.$this->template.’/css/vmenu.css’); // подключаем файл стилей
    $doc->addScript(JUri::base().’/templates/’.$this->template.’/js/menu-collapsed.js’); // подключаем скрипт меню, в данном случае это вариант 1
    ?>
    3)
    Может дело в самом скрипте?

    • Заур Магомедов
      Заур Магомедов Июл 01, 2016 в 11:45

      Что то неправильно скорее всего сделали. Посмотрите в консоле, нет ли ошибок. Или дайте ссылку на сайт, я гляну.

      • Роман Июл 01, 2016 в 16:39

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

        В консоли выдаёт следующую ошибку
        TypeError: jQuery(…).tooltip is not a function

        lestnitsy.html:48
        m.Callbacks/j()
        jquery.min.js:2
        m.Callbacks/k.fireWith()
        jquery.min.js:2
        .ready()
        jquery.min.js:2
        J()
        jquery.min.js:2

        • Роман Июл 01, 2016 в 17:32

          Ошибка исчезает, если не подключать вручную jQuery но меню всё равно не работает.

        • Заур Магомедов
          Заур Магомедов Июл 01, 2016 в 17:33

          У вас ошибку выдает другой скрипт, который скорее всего подключен до меню. На нем исполнение js и завершается. TypeError: jQuery(…).tooltip — в моем скрипте нет метода tooltip. Дайте ссылку на сайт.

          • Роман Июл 01, 2016 в 17:41

            kuznya47.ru
            Меню тестовое, состоит только из одного пункта «Ворота» находится в левом нижнем углу.

            • Заур Магомедов
              Заур Магомедов Июл 01, 2016 в 20:36

              Меню не работает, потому что вы использовали тип пункта — текстовый разделитель. А скрипт работает с тегом — «a». Можете в скрипте в строчке —

              .menu_bottom li a

              добавить через запятую

              .menu_bottom li span

              . Т.е. вот так

              .menu_bottom li a, .menu_bottom li span 
              • Роман Июл 01, 2016 в 20:47

                Да, это помогло. Спасибо за скрипт и за помощь.

                • Заур Магомедов
                  Заур Магомедов Июл 01, 2016 в 22:22

                  Не за что! Вам спасибо за обращение.

      • Ольга Июл 18, 2016 в 11:19

        спасибо. наверное был кэш не очищен. заработало.

  • Анна Левчук Май 27, 2016 в 0:06

    Заур, спасибо Вам! У меня джумла 2.5, но все получилось, даже разобралась как и где убрать строки return false!

    • Заур Магомедов
      Заур Магомедов Май 27, 2016 в 0:18

      Не за что! Я рад за Вас!

  • Алексей Фев 17, 2016 в 16:22

    Все работает , но подменюшки видно сразу все и они не сворачиваются в одну .Что делатТЬ

    • Заур Магомедов
      Заур Магомедов Фев 17, 2016 в 20:38

      Какие подменюшки? Вы же говорите работает?

  • Александр Александров Фев 07, 2016 в 15:46

    Здравствуйте! Замечательное меню, спасибо за подробные объяснения по установке. Только один вопрос, как можно сделать, чтобы при нажатии на кнопку другой родительской категории, предыдущая сворачивалась? А то она сворачивается только после перехода по ссылке.

    • Заур Магомедов
      Заур Магомедов Фев 07, 2016 в 15:53

      Там же два варианта меню. Один вариант как раз так и работает.

      • Александр Александров Фев 07, 2016 в 15:54

        спасибо! не то подключил)

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

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

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

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

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