В этой статье подробно рассказывается, как интегрировать красивое выпадающее jQuery-меню в шаблон Joomla. Идея не нова, но почему-то я практически не встречал толковых руководств по интеграции. Все пишут: «Вот, замечательное меню. Берите и пользуйтесь!». При этом подразумевается, что читатели знают, как его использовать. Это и естественно, ведь данные статей не рассчитаны именно на Joomla, хотя с интеграцией в Joomla у новичков могут возникнуть сложности. В этой статье я решил подробно рассказать, что и как делать. Надеюсь, она окажется многим полезна.
Думаю, все веб-мастера, работающие с Joomla знают об особенностях системы меню этой CMS. Joomla имеет мощную систему настройки меню, но при этом, для того, чтобы создать не просто «меню», а «красивое меню», например, с эффектами затухания или скольжения, нужно обладать достаточно широкими познаниями технологий и вложить немало усилий. Помню, делая свое первое простое CSS меню, я потратил уйму времени, пока разобрался со всеми комбинациями «li ul». И это не говоря о JavaScript. Как говорится, кто пробовал, тот поймет. Но существует и более простое решение. В Интернете масса великолепных меню, построенных на jQuery (библиотека JavaScript). Большинство из них свободно распространяются. Правда главным минусом таких меню является то, что они изначально ориентированы на простой html-код (li ul). В Joomla же код меню строится динамически, что вызывает у многих новичков недопонимание, и, как следствие, отказ от таких меню.
Чтобы поставить все точки над «i», я расскажу об интеграции поэтапно, показав каждый этап на примере. Кроме того, в конце статьи вы сможете найти все файлы-исходники для этого урока, чтобы каждый мог сам попробовать провести интеграцию jQuery-меню в шаблон Joomla.
Итак, во-первых, нужно разобраться с тем, что, собственно, мы будем интегрировать. Меню, построенных на jQuery, масса, но для первого раза я взял не сильно эффектное, зато более простое, выпадающее горизонтальное меню под названием Smooth Navigational Menu.
Пример можно увидеть здесь.
Как можно видеть, меню выпадающее и имеет некоторые JavaScript-эффекты. Ничего подобного стандартными средствами Joomla не получишь.
Меню состоит из 5 файлов:
- ddsmoothmenu.js;
- ddsmoothmenu.css
- 2 картинки (стрелки вправо и вниз);
Также нам понадобится, собственно, библиотека jQuery:
- jquery.min.js.
Обычно, набор именно таких файлов (без картинок), можно найти в статьях о jQuery-меню.
Также я взял шаблон first_template из серии статей «Работа с шаблонами Joomla».
Таким образом, исходными данными у нас будут 5 файлов меню и шаблон Joomla.
Теперь нужно понять, что же со всем этим добром делать. Разобьем весь процесс интеграции на этапы.
Первый этап интеграции. Копирование файлов.
Прежде всего, нам нужно перенести файлы меню в папку с шаблоном и разложить их по своим местам. В данный момент в нашем шаблоне есть папки: css, images и html. Добавим к ним еще одну папку js.Вообще, именно такое название папки не обязательно. Ее можно назвать и по-другому, но принято так.
Теперь раскидаем файлы нашего выпадающего меню по соответствующим папкам, а именно:
- ddsmoothmenu.js и jquery.min.js в папку js;
- ddsmoothmenu.css в папку css;
- 2 картинки со стрелками в папку images.
Вот и все. На этом первый этап интеграции закончен. Пока просто, не правда ли? :-)
Второй этап интеграции. Подключение файлов меню к шаблону Joomla.
Первым деломдобавим небольшой скипт в файл index.php нашего шаблона. Он должен находиться между тэгами <head> и </head>:
1 |
<script type="text/javascript"> |
Этот код дан в инструкции по подключению на сайте разработчика меню. Обычно достаточно только подключения файлов, про которое написано ниже, но в данном случае необходим и этот код.(Примечание: для правильной работы меню данный код должен быть добавлен после кода подключения 3 файлов(см. ниже)).
Теперь нам необходимо подключить скопированные файлы. Это также делается достаточно просто. Открываем файл index.php нашего шаблона и между тэгами <head> и </head> добавляем следующие строчки:
1 |
<link rel="stylesheet" href="/templates/first-template/css/ddsmoothmenu.css" /> |
Вообще говоря, указывать прямое название шаблона в таких записях - не совсем корректно. Правильнее задавать его через переменную, но для упрощения мы сделаем именно так.
Первая строчка будет отвечать за подключение css-файла меню к шаблону, а вторая и третья за подключение js-файлов.
Для того чтобы проверить, что все файлы подключены, нужно обновить страницу и посмотреть ее исходный код. Это можно сделать, кликнув по странице правой кнопкой мыши и выбрав пункт «Исходный код страницы» (такой пункт в firefox, в других браузерах надпись может отличаться). После этого появится html-код сгенерированной страницы. В этом коде между тегами <head> и </head> должны появиться добавленные нами ссылки. При этом при клике по ним должен открываться соответствующий файл. Это нужно проверить, дабы избежать недоразумений в дальнейшем.
После того как все проверено, второй этап интеграции закончен.
Третий этап интеграции. Подключение стилей к меню Joomla.
Для функционирования нашего выпадающего меню нам осталось его создать и подключить к нему соответствующие стили. Тут встает вопрос: «как подключить нужные классы к меню Joomla?».
Объясню проблему:
Для правильного функционирования меню «li ul» нам нужно поместить его в контейнер DIV с определенным идентификатором и классом, а именно:
class="ddsmoothmenu"
В Joomla же любое меню формируется и выводится без всяких Div’ов. Но мы можем создать контейнер DIV с требуемыми классом и идентификатором в нужном месте кода шаблона и вывести в нем позицию модуля, к которой, в дальнейшем, публиковать только меню. Думаю, получилось не очень понятно. Особенно для тех, кто не читал серию про создание собственного шаблона Joomla. Попробую объяснить проще. Каждый модуль выводится в определенной позиции, которая определяется в шаблоне. Если позицию поместить в DIV и вывести в ней меню, то получится как раз такой код, который необходим для функционирования выпадающего меню. Опять сложно получилось, ну да ладно, кому интересно, читайте серию про шаблоны.
Файл index.php:
Код до правки:
1 |
<?php if($this->countModules('hornav')) : ?> |
Код после правки:
1 |
<?php if($this->countModules('hornav')) : ?> |
Тут мы делаем, то, что я описал выше. Создаем DIV с необходимым классом и идентификатором.
Недостаток этого способа заключается в том, что позиция теперь не очень подходит для вывода других модулей, т.к. ориентирована именно на меню.
Теперь, если обновить страницу, мы наконец-то увидим наше заветное выпадающее меню.
Единственное, чего не хватает, это стрелочки, указывающие на наличие подпунктов. Они отсутствуют из-за того, что мы пока не прописали правильные пути к картинкам. Для того чтобы сделать это, откроем файл ddsmoothmenu.js и в 19-й строке заменим:
1 |
arrowimages: {down:['downarrowclass', 'down.gif', 23], |
на:
1 |
arrowimages: {down:['downarrowclass', '/templates/first-template/images/down.gif', 23], |
Теперь можно увидеть, что стрелочки в меню появились.
Ну вот и все, jQuery-меню интегрировано. Теперь остается только поиграть с CSS, чтобы настроить цветовую схему меню, и с js, настраивая длительность выпадения/скрытия подпунктов.
Следуя этим трем несложным этапам, вы сможете интегрировать в свой шаблон Joomla всю мощь jQuery. Отличных меню, созданных с помощью этой библиотеки, довольно много. Теперь каждый сможет установить себе на сайт меню по вкусу и не нужно пользоваться платными шаблонами.
Файлы:
Меню , first-template.zip, first-template-joomla.zip - шаблон Joomla со встроенным меню.