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

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

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

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

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

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

Пост был обновлен: Дек 10, 2015

Здравствуйте друзья! На связи Заур Магомедов. В данной заметке хочу представить вам симпатичное вертикальное аккордеон меню для сайта на 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}

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

Читайте также:  Фреймворк Twitter Bootstrap - что это такое?

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

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

Читайте также:  Создаем всплывающие окна для сайта - Magnific Popup

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

  • Файл 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» и в качестве урл вставить заглушку — #. Все остальное тоже самое.

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

Пост был обновлен: Дек 10, 2015

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

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

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

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

1 балл2 балла3 балла4 балла5 баллов
голосов: 18, средний бал: 2,44 / 5
Загрузка...

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

Система Orphus

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

  • Илья Дек 06, 2016 в 16:37

    Спасибо, Заур!

    Воспользовался вашей статьей и скриптами. Все работает, как часы!
    Успехов вам! Пишите еще!

    • Заур Магомедов
      Заур Магомедов Дек 06, 2016 в 18:58

      Спасибо!

  • Денис Ноя 24, 2016 в 2:13

    Здравствуйте! А как сделать так что бы корневые пункты меню были тоже кликабельны?

    • Заур Магомедов
      Заур Магомедов Ноя 24, 2016 в 11:15

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

  • Таша Окт 26, 2016 в 10:59

    Доброго времени суток! Подключила ваше меню на мобильную версию сайта http://book.kamensktel.ru/ Собственно отображается просто раскрытым меню, как стандартное…что не так подскажите пожалуйста

    • Таша Окт 26, 2016 в 11:07

      разобралась!!!

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

      Здравствуйте! Что-то не увидел у вас на сайте аккордеон меню. Где оно?

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

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

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

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

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