Интеграция выпадающего jQuery-меню в шаблон Joomla.

26.06.2010

Wedal

Уроки Joomla

В этой статье подробно рассказывается, как интегрировать красивое выпадающее jQuery-меню в шаблон Joomla. Идея не нова, но почему-то я практически не встречал толковых руководств по интеграции. Все пишут: «Вот, замечательное меню. Берите и пользуйтесь!». При этом подразумевается, что читатели знают, как его использовать. Это и естественно, ведь данные статей не рассчитаны именно на Joomla, хотя с интеграцией в 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>:

<script type="text/javascript">
ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', 
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

Этот код дан в инструкции по подключению на сайте разработчика меню. Обычно достаточно только подключения файлов, про которое написано ниже, но в данном случае необходим и этот код.(Примечание: для правильной работы меню данный код должен быть добавлен после кода подключения 3 файлов(см. ниже)).

Теперь нам необходимо подключить скопированные файлы. Это также делается достаточно просто. Открываем файл index.php нашего шаблона и между тэгами <head> и </head> добавляем следующие строчки:

1
2
3

<link rel="stylesheet" href="/templates/first-template/css/ddsmoothmenu.css" />
<script type="text/javascript" src="/templates/first-template/js/jquery.min.js"></script>
<script type="text/javascript" src="/templates/first-template/js/ddsmoothmenu.js"></script>

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

Первая строчка будет отвечать за подключение css-файла меню к шаблону, а вторая и третья за подключение js-файлов.

Для того чтобы проверить, что все файлы подключены, нужно обновить страницу и посмотреть ее исходный код. Это можно сделать, кликнув по странице правой кнопкой мыши и выбрав пункт «Исходный код страницы» (такой пункт в firefox, в других браузерах надпись может отличаться). После этого появится html-код сгенерированной страницы. В этом коде между тегами <head> и </head> должны появиться добавленные нами ссылки. При этом при клике по ним должен открываться соответствующий файл. Это нужно проверить, дабы избежать недоразумений в дальнейшем.

После того как все проверено, второй этап интеграции закончен.

Третий этап интеграции. Подключение стилей к меню Joomla

Для функционирования нашего выпадающего меню нам осталось его создать и подключить к нему соответствующие стили. Тут встает вопрос: «как подключить нужные классы к меню Joomla?».

Объясню проблему:

Для правильного функционирования меню «li ul» нам нужно поместить его в контейнер DIV с определенным идентификатором и классом, а именно:

class="ddsmoothmenu"

В Joomla же любое меню формируется и выводится без всяких Div’ов. Но мы можем создать контейнер DIV с требуемыми классом и идентификатором в нужном месте кода шаблона и вывести в нем позицию модуля, к которой, в дальнейшем, публиковать только меню. Думаю, получилось не очень понятно. Особенно для тех, кто не читал серию про создание собственного шаблона Joomla. Попробую объяснить проще. Каждый модуль выводится в определенной позиции, которая определяется в шаблоне. Если позицию поместить в DIV и вывести в ней меню, то получится как раз такой код, который необходим для функционирования выпадающего меню. Опять сложно получилось, ну да ладно, кому интересно, читайте серию про шаблоны.

Файл index.php:

Код до правки:

1
2
3

<?php if($this->countModules('hornav')) : ?>
   <jdoc:include type="modules" name="hornav" />
<?php endif; ?>

Код после правки:

<?php if($this->countModules('hornav')) : ?>
   <div class="ddsmoothmenu" id="smoothmenu1">
      <jdoc:include type="modules" name="hornav" />
   </div>
<?php endif; ?>

Тут мы делаем, то, что я описал выше. Создаем DIV с необходимым классом и идентификатором.

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

Теперь, если обновить страницу, мы наконец-то увидим наше заветное выпадающее меню.

Единственное, чего не хватает, это стрелочки, указывающие на наличие подпунктов. Они отсутствуют из-за того, что мы пока не прописали правильные пути к картинкам. Для того чтобы сделать это, откроем файл ddsmoothmenu.js и в 19-й строке заменим:

1	arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},

на:

1	arrowimages: {down:['downarrowclass', '/templates/first-template/images/down.gif', 23], right:['rightarrowclass', '/templates/first-template/images/right.gif']},

Теперь можно увидеть, что стрелочки в меню появились.

Ну вот и все, jQuery-меню интегрировано. Теперь остается только поиграть с CSS, чтобы настроить цветовую схему меню, и с js, настраивая длительность выпадения/скрытия подпунктов.

Интеграция выпадающего jQuery-меню в шаблон Joomla

Следуя этим трем несложным этапам, вы сможете интегрировать в свой шаблон Joomla всю мощь jQuery. Отличных меню, созданных с помощью этой библиотеки, довольно много. Теперь каждый сможет установить себе на сайт меню по вкусу и не нужно пользоваться платными шаблонами. А если вдруг все это сложно для вас, то можно заказать создание сайта у профессионалов, а самим заниматься другими важными задачами.

Файлы:

Меню , first-template.zip, first-template-joomla.zip - шаблон Joomla со встроенным меню.

Wedal

(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

Похожие статьи

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

Комментарии

Rudolf

27.06.2010, 06:30

Спасибо очень помогли!!!