В этой статье подробно рассказывается, как интегрировать красивое выпадающее 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 нашего шаблона. Он должен находиться между тэгами и :

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

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

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

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

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

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

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

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

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

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

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

– class=«ddsmoothmenu»

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

И это еще не все…

Источник — http://wedal.ru