Рекомендую!

Видеокурс: "Шаблон Joomla 2.5 от А до Я"

diskboxsmall

Научитесь создавать свои собственные уникальные и профессиональные шаблоны для Joomla 2.5!

Добро пожаловать в школу Джумла!

Вы находитесь в центре обучения работы с Джумлой, одной из наиболее мощных, простых и бесплатных систем управления содержимым сайта на планете. Не важно, новичок Вы в использовании этой CMS или профессионал, Школа Джумлы откроет Вам много новых, интересных уроков и советов в видео и текстовом формате по работе с этой системой управления сайтом.  Подробнее...

ЗАГРУЗИТЬ СТАБИЛЬНУЮ ВЕРСИЮ ДЖУМЛА

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

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

Таким образом, исходными данными у нас будут 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>

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

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

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

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

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

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

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

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

– class="ddsmoothmenu"

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

Файл index.php

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

<jdoc:include name="hornav" />

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

    <div class="ddsmoothmenu">
       <jdoc:include name="hornav" />
    </div>

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

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

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

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

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

на:

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

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

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

smoothmenusite

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

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

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


Защитный код
Обновить

Рекомендую!

Новые комментарии

  • Now, when correspondent attemptedto glean one thing through Staff Sky’s restriction media contact ... Подробнее...  
  • Howdy I am so happy I found your blog page, I really found you by accident, while I was browsing ... Подробнее...  
  • Would Changing into A Freelance Pаralegaⅼ Be A Good Choice For You? Подробнее...  
  • I like the valuable info you supply on your articles. I will bookmark your blog and take a look at ... Подробнее...  
  • I like looking through an article that will make men and women think. Also, many thanks for permitting ... Подробнее...