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

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

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

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

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

Читайте также:  RSForm - ajax отправка форм без перезагрузки страницы

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

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

  • Анна Апр 24, 2013 в 10:20

    Я имею в виду что на моем сайте http://zmtek.soft96.ru/ во вкладке «Продукция» идет описание этой самой продукции, а внизу под описанием торчит структура, та же самая, которая отображается слева в вертикальном меню. Так вот вертикальное меню нужно, а эту структуру внизу под описанием Продукции нужно убрать совсем. Она там ненужна. Как это сделать? Я сейчас ковырялась и описание на вкладке продукция у меня почему то пропало. Я запуталась уже.
    И еще утром на почту вам сообщение отправляла)

    • Заур Магомедов
      Заур Магомедов Апр 24, 2013 в 10:29

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

  • Анна Апр 24, 2013 в 9:21

    Доброе утро, Заур! Еще вот такой вопрос: как убрать отображение подкатегории категорий, чтобы эта структура не отображалась внизу страницы. А то получается что эта структура в вертикальном меню аккордеон 2 отображается и еще тут же на этой же странице внизу ее прямо под текстом. Как то некрасиво. Я читала, но что то не нашла того, что нужно по данному вопросу.

    • Заур Магомедов
      Заур Магомедов Апр 24, 2013 в 10:09

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

  • Анна Апр 23, 2013 в 13:53

    Отправила данные на почту. Жду ответа)

  • Анна Апр 23, 2013 в 13:02

    Написала вместо “template ?” имя своего шаблона, а оно у меня a4joomla-corporation-free, стало совсем все печально, сайт вообще не открывается и выдает ошибку — Parse error: syntax error, unexpected ‘/’ in /home/zmtek/public_html/templates/a4joomla-corporation-free/index.php on line 42

  • Анна Апр 23, 2013 в 12:56

    Что то совсем не то пришло вам

    • Заур Магомедов
      Заур Магомедов Апр 23, 2013 в 13:34

      В комментариях нельзя вставлять ссылки на яваскрипт файлы, они урезаются.

      • Анна Апр 23, 2013 в 13:37

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

        • Заур Магомедов
          Заур Магомедов Апр 23, 2013 в 13:38

          Скиньте мне ftp-доступы на мою почту — zaurmag411@gmail.com и доступы в админку. Посмотрю что там…

  • Анна Апр 23, 2013 в 12:55

    Прописала вот такую строку и изменила имя шаблона на свое. Вот что получилось — /js/menu.js» type=»text/javascript»>
    Но ничего не изменилось. Может быть я чего то не понимаю(

  • Анна Апр 23, 2013 в 12:38

    С последним вопросом уже разобралась, а вот анимация в плане выпадающих подпунктов мне все-таки нужна. http://zmtek.soft96.ru/
    Жду вашей рекомендации.

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

      Вы неправильно подключили файл — menu.js. Посмотрите внимательно в файле index.php. Вот что выдает в исходном коде — /templates/template ?>/js/menu.js. Вместо «template ?» должно подставиться имя вашего шаблона.

  • Анна Апр 23, 2013 в 11:20

    И еще такой вопрос: какие нужно сделать настройки отображения материала, чтобы вертикальное меню не исчезала в тот момент, когда заходишь в какой-либо его подпункт. А то получается что навигация пропадает вся, потому что материал открывается в пустой странице.

    • Заур Магомедов
      Заур Магомедов Апр 23, 2013 в 11:38

      Здравствуйте! Сайт в студию… Без пациента ничего не могу сказать.

  • Анна Апр 23, 2013 в 10:38

    Здравствуйте, Заур! Попыталась установить себе меню аккордеон 2, вроде все получилось, но не работает анимация, то есть список не раскрывается, чего я больше всего и добивалась. Я в этом деле совсем новичок. Начиталась комментариев и совсем запуталась что же делать. Помогите, пожалуйста! Заранее спасибо.

  • Алексей Апр 19, 2013 в 14:15

    Спасибо за очередной хороший урок! Только вот один момент.
    Для более быстрой загрузки сайта ГУГЛ советует подключать файлы стилей через link , а не через import. Вы же советуете наоборот. Почему?
    Почитать можно здесь:
    http://habrahabr.ru/post/57012/
    или на самом Гугле
    https://developers.google.com/speed/docs/best-practices/rtt?hl=ru#AvoidCssImport

    • Заур Магомедов
      Заур Магомедов Апр 19, 2013 в 14:35

      А вот мне казалось совсем наоборот — что браузер в таком случае (@import) видит как один css-файл, а не два. Хотя, я проблем с этим еще не получал, ни в ИЕ, ни в других браузерах. Спасибо за ссылку! Как говорится — «Одна голова хорошо, а две лучше».

  • Игорь Апр 15, 2013 в 16:30

    Удалил — помогло. Но только анимации не работают (сворачивание меню), все по инструкции делал..

    • Заур Магомедов
      Заур Магомедов Апр 15, 2013 в 17:11

      Попробуйте отключить widjetkit и проверьте, если поможет будем думать…

      • Игорь Апр 15, 2013 в 17:17

        Я отключил все что связанно с widgekit.
        Проблема актуальна..(

        • Заур Магомедов
          Заур Магомедов Апр 15, 2013 в 17:30

          Попробуйте подключить скрипты меню до файлов стилей и еще при отключенном widjetkit подключите опять jQuery версии 1.9

          • Игорь Апр 17, 2013 в 13:57

            Сразу после

            Вставил одну строку подключения файла меню:
            <script src="/templates/template ?>/js/menu-collapsed.js» type=»text/javascript»>
            Все работает, спасибо что помогли разобраться.

            • Заур Магомедов
              Заур Магомедов Апр 17, 2013 в 14:09

              Не за что. Рад был помочь!

    • Игорь Июл 20, 2013 в 13:20

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

  • Игорь Апр 15, 2013 в 15:44

    Не могу подключить js на сайте gk-phoro.ru:
    1. в индексном файле шаблона между тэгими вставляю:
    <script src="/templates/template ?>/js/menu-collapsed.js» type=»text/javascript»>
    <script src="/templates/template ?>/js/menu.js» type=»text/javascript»>

    сразу перед закрывающимся тэгом. Как видно на сайте http://gk-photo.ru/ эффектов нет(

    • Игорь Апр 15, 2013 в 15:56

      Вот еще, я использую widgekit, как мне кажется это конфликт скриптов, т.к. больше скриптов нет ни где, галереи есть на всех страницах, но после подключения js «подглючивают». Что можно сделать?

      • Заур Магомедов
        Заур Магомедов Апр 15, 2013 в 16:24

        Попробуйте удалить строку подключения jQery. Библиотека jQuery у вас уже подключена, просто версии разные, вот отсюда и может быть конфликт.

        • Игорь Апр 15, 2013 в 17:43

          Подключил скрипты сразу же после
          вначале
          А как подключить jQuery версии 1.9?
          У нас же jquerry подключается в индексном файле шаблона, в head, а там только строки:
          <script src="/templates/template ?>/js/menu-collapsed.js» type=»text/javascript»>
          <script src="/templates/template ?>/js/menu.js» type=»text/javascript»>
          Версии неизвестны.

          • Игорь Апр 15, 2013 в 17:46

            Подключил скрипты сразу же после _jdoc:include type=»head» _
            вначале _head_

          • Заур Магомедов
            Заур Магомедов Апр 15, 2013 в 17:47

            Была еще и третья строка. Вы ее удалили, чтобы не было конфликтов, верните ее. В тексте найдите — «Строка подключения будет иметь вид:»

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

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

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

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

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