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

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

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

Заур Магомедов
Главная » 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 2.5 до Joomla 3.x.x?

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

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

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

  • Александр Фев 04, 2016 в 17:10

    Using $this when not in object context in index.php

    В чём проблема жалуется на $this

    • Заур Магомедов
      Заур Магомедов Фев 05, 2016 в 22:42

      Какая версия joomla?

  • Антон Янв 20, 2016 в 17:34

    После обновы на joomla 3.4 меню перестало работать. постоянно в открытом виде.

    • Заур Магомедов
      Заур Магомедов Янв 20, 2016 в 18:54

      По идее не должно было повлиять. А с какой версии обновлялись? Посмотрите не конфликтуют ли скрипты…

      • Антон Янв 22, 2016 в 12:43

        Тоже не работает. Все переставил перенастроил по новой. Висит в открытом виде.

      • Антон Янв 22, 2016 в 12:46

        Простите тупанул. С Joomla 2.5, переустановил все по новой. не арбайт.

        • Заур Магомедов
          Заур Магомедов Янв 22, 2016 в 13:32

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

          • Антон Янв 22, 2016 в 13:55

            Только что пришло озарение=))))

            <?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
            ?>

            тут банально изменился путь c /js/menu-collapsed.js на /javascript/menu-collapsed.js

            исправил и заработало) спасибо Вам за меню

            • Заур Магомедов
              Заур Магомедов Янв 22, 2016 в 14:24

              Не за что!

  • Zhanina Дек 10, 2015 в 7:07

    Заур, вам такое спасибо!
    Вы буквально на пальцах объяснили то, что у других авторов невозможно было понять.
    Я билась 3 дня над этим вопросом, а с вашим мануалом за 10 минут сделала выпадающее меню.
    Респект!!!

  • Srg Дек 07, 2015 в 14:02

    Спасибо, правда немного не понял строчку «…Для этого в самом начале файла index.php» , т.е. не важно, где должно находиться подключение в тегах head или body, если важно, то напишите, где начало файла… Ещё один нюанс вышел, вначале не получалось потому что попутал… Суффикс CSS-класса модуля и просто Суффикс класса меню … непонятно в чём различие, некоторые там пишут, другие здесь… но это не главное, самое главное, то что меню заработало, но у меня родительский пункт меню имеет тип материал , и когда его выбираешь, на главной показывается материал, а сам родительский пункт раскрывается на подпункты… Как это можно сделать в этом меню? и вообще можно ли такое сделать?

    • Заур Магомедов
      Заур Магомедов Дек 07, 2015 в 21:47

      Подключить скрипт можно в начале файла — сверху как правило идет php код. Вот между открытыми тегами php можно и вставить подключение скрипта меню. А вообще лучше сейчас подключать до закрывающего тега

      &lt;/body&gt;

      .
      Суффикс класса модуля это суффикс, который добавляется к блоку меню, а суффикс класса меню задает суффикс списку меню — тег

      &lt;ul&gt;

      .

      На счет раскрытия пункта меню не понял. Дайте ссылку на сайт.

  • Red Label Окт 30, 2015 в 18:40

    Отличное меню! Но после установки возникла проблема. Если щелкнуть на пункт меню, не имеющий дочерних пунктов, то раскрываются подкатегории всех пунктов меню. Что делать? Вот сайт p-49.ru (щелкнуть нужно на «Вопрос-ответ»)

    • Заур Магомедов
      Заур Магомедов Окт 30, 2015 в 19:16

      У вас на самой странице вопрос — ответ меню просто не работает, поэтому пункты и раскрыты. Посмотрите подключение скриптов на этой странице.

      • Red Label Окт 30, 2015 в 22:12

        Спасибо за ответ, Заур. Проверил подключение скриптов
        Вот страница http://p-49.ru/index.php/voprosotvet
        Скрипт подключается на 43 строчке.
        В настройках меню указан показ на всех страницах.
        Мистика.
        Может ли это быть связано с тем что пункт меню «вопрос-ответ» — это компонент SM FAQ?
        Какие еще могут быть варианты?

        • Заур Магомедов
          Заур Магомедов Окт 30, 2015 в 23:56

          Да, именно так. Скорее всего связано с компонентом SM FAQ. У вас в исходном коде скрипт меню подключается выше библиотеки jQuery, а этого быть не должно.

          Исходный код страницы

          Вот что выдает Firebug.

          ошибка jQuery
          Переместите подключение меню до закрывающего тега

          &lt;/body&gt;

          . Подключите вручную через теги

          &lt;script&gt;&lt;/script&gt;

          . Должно работать.

          • Red Label Окт 31, 2015 в 0:45

            Заур, спасибо тебе огромное от души! Теперь работает!

            • Заур Магомедов
              Заур Магомедов Окт 31, 2015 в 2:08

              Не за что 🙂

  • Gwork Окт 27, 2015 в 15:38

    Отличный материал! Автору спасибо.
    Но — надо бы отметить куда css код вставлять, чайник не поймет 🙂

    • Заур Магомедов
      Заур Магомедов Окт 28, 2015 в 0:00

      Что значит куда вставлять? Я даю файл **.css, его надо подключить. Если и это не понятно, то лучше сразу обратиться к специалисту.

  • Виктор Сен 19, 2015 в 14:29

    после копирования в index.php появляется ошибка Parse error: syntax error, unexpected ‘&’ in /home/u259929613/public_html/templates/protostar/index.php on line 10

    • Заур Магомедов
      Заур Магомедов Сен 19, 2015 в 15:12

      Скопируйте еще раз код, я его обновил. Это просто синтакс плагин его исказил.

      • Виктор Сен 19, 2015 в 16:27

        Спасибо помогло))

        • Заур Магомедов
          Заур Магомедов Сен 19, 2015 в 16:37

          Спасибо вам!

  • Egor Авг 23, 2015 в 19:15

    обидно. потратил столько времени впустую.

    • Заур Магомедов
      Заур Магомедов Авг 23, 2015 в 21:36

      А в чем проблема то?

      • Egor Авг 24, 2015 в 10:28

        Спасибо, Заур, что не оставили без внимания. Это просто был «крик души». Не совсем был понятен код, так как являюсь новичком в этом деле. Но еще пара часов и я разобрался со всем.

        • Заур Магомедов
          Заур Магомедов Авг 24, 2015 в 19:56

          Будут вопросы, задавайте… ))

  • Александр Авг 19, 2015 в 23:47

    Здравствуйте! Сделал все по Вашей инструкции,но ничего не изменилось.Только в шапке сайта появилась надпись

    " &lt;?php $doc = JFactory::getDocument(); // �������� ��������� $doc-&gt;addStyleSheet(JUri::base().'/templates/'.$this-&gt;template.'/css/vmenu.css'); // ���������� ���� ������ $doc-&gt;addScript(JUri::base().'/templates/'.$this-&gt;template.'/js/menu-collapsed.js'); // ".
    

    В чем может быть проблема.

    P.S. только начал знакомство с джумлой. Зарание спасибо за внимаение.

    • Заур Магомедов
      Заур Магомедов Авг 20, 2015 в 19:39

      Что то не то вы сделали. Еще раз пройдитесь по статье и по вашему коду. Посмотрите, может ошибку допустили…

  • Дмитрий Апр 22, 2015 в 21:47

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

    • Заур Магомедов
      Заур Магомедов Апр 23, 2015 в 18:21

      Здравствуйте Дмитрий! Скорее всего конфликтуют скрипты. Киньте ссылку на сайт.

      • Дмитрий Апр 24, 2015 в 18:05

        Я еще его не выкладывал, только в выходные буду это делать. Как выложу, отправлю ссылку, если не разберусь.

  • Сергей Янв 30, 2015 в 23:42

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

    • Заур Магомедов
      Заур Магомедов Янв 30, 2015 в 23:44

      Если вы уберете return false у вас меню будет вверх перебрасывать по клику.

  • Karol Янв 30, 2015 в 23:20

    Спасибо огромное! Очень помогли, давно искала подобное меню.))

    • Заур Магомедов
      Заур Магомедов Янв 30, 2015 в 23:40

      Не за что!!!

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

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

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

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

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