Интеграция выпадающего jQuery-меню в шаблон Joomla.
В этой статье подробно рассказывается, как интегрировать красивое выпадающее 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')) : ?> |
Недостаток этого способа заключается в том, что позиция теперь не очень подходит для вывода других модулей, т.к. ориентирована именно на меню.
Теперь, если обновить страницу, мы наконец-то увидим наше заветное выпадающее меню.
Единственное, чего не хватает, это стрелочки, указывающие на наличие подпунктов. Они отсутствуют из-за того, что мы пока не прописали правильные пути к картинкам. Для того чтобы сделать это, откроем файл 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 со встроенным меню.
Следующие статьи:
Предыдущие статьи:
Рубрики
Серии статей
Популярное
- Virtuemart - интернет-магазин для Joomla. Часть 3. Установка и обновление.
- VirtueMart – интернет-магазин на Joomla. Часть 19. Редактирование шаблона VirtueMart (Начало).
- VirtueMart - интернет-магазин на Joomla. Часть 5. Настройка VirtueMart.
- Шаблоны Joomla. Часть 3. Делаем первый шаблон.
- Virtuemart - интернет-магазин для Joomla. Часть 1. Знакомство с Virtuemart.
- VirtueMart – интернет-магазин на Joomla. Часть 18. Вывод категорий VirtueMart с изображениями на главной станице сайта.
- Virtuemart - интернет-магазин на Joomla. Часть 8. Товары и категории товаров.
- VirtueMart – интернет-магазин для Joomla. Часть 4. Настройка глобальной конфигурации.
- Шаблоны Joomla. Часть 1.Создание шаблона Joomla.
- VirtueMart – интернет-магазин на Joomla. Часть 20. Редактирование шаблона VirtueMart (Продолжение).
Последние комментарии
...
Заморочки яндекса уже реально достали. тИЦ не ...Клуб
Подписка
Заработок для web-мастера
Скачать Joomla
Благодарность Автору
Комментарии
как сюда добавить
Как решить??
Пример: rokbox + jQuery 1.3.2
phocagallery (с любым эффектом кроме JAKbox) + jQuery 1.3.2
http://nauca.com.ua/zametki/resolve-conflicts-jquery-mootools/
этот код вот как представлен заработал у кого то? и если надо что то еще менять - укажите на что обратить внимание?
при разборе ЦСС к меню то подуровень меню указан
display: none;
visibility: hidden;
где указывается в js файле чтобы подменю было display: block; ?
Заранее спасибо. интересно разобрать принцип работы кода
В чем может быть проблема?
при интеграции надо очень внимательно пути расставлять к скриптам, ато не будет отображатся подменю
и еще обязательно надо указывать id
Спасибо за статью!
Присоединяюсь к Саньку, не работает выпадение меню, как только не пытался указывать путь... ткните носом плиз, спасибо.
прописанны пути в виде http://test.ru/templates/first-template/css/ddsmoothmenu.css
Стиль меню - список
Всегда показывать вложенные подпункты - да.
В идеале, вы должны добиться того, чтобы код меню сгенерированной страницы Joomla совпадал с кодом примера меню, которое есть в начале статьи(если перейти по ссылке). Тогда все должно заработать.
Ошибка: $mainmenu.parent().get(0) is undefined
Источник: ......./js/ddsmoothmenu.js
Спасибо заранее :)
если ты о том чтобы пирнаведнии кнопка коректно меняла бэкграунд то нужно пддинги верх и низ подогнать у a:hover
Вообще все просто, вы создаете пункт меню и желаете от него выпадания так сказать. И здесь все просто, вы просто делаете для него родительским элементом тот пункт меню,из которого он должен выпадать. я надеюсь не открыл америку. Сам дружу с джумлой всего 4 месяца.
Ваше меню использует яваскрипты, подключенных к шаблону и, по сути, подключается также, как и меню, описанное в этой статье. Просто в том шаблоне за вас это сделали его разработчики.
Вы очень детально описали процесс интеграции jQuery-меню в шаблон Joomla.
У меня есть к вам один вопрос. Я хочу интегрировать jQuery плагин jTip: http://www.codylindley.com/blogstuff/js/jtip/ в Joomla.
Пожалуйста скажите возможно ли это сделать и главное как? И нужен ли для этого “no conflict” плагин SC jQuery:
http://extensions.joomla.org/extensions/core-enhancements/scripts/7230
Заранее благодарю.
Проблема у меня, вы вставляете меню в табличный шаблон, а я сделал шаблон на блоках и уже третий день не могу никак там горизонтальное меню сделать. Уже руки опустились. Помогите плиз кто нить.
ася:631329483
Вообще, разницы особой быть не должно, т.к меню строится на UL LI. Оболочка, если она правильно настроена, роли не играет.
У меня вопрос, только прошу не кидаться валенками в пенсионера
Подскажите "чайнику" как это работает? В меню джумла понятно - пункт меню отвечает за определенный раздел, категорию или статью, то есть получаем два уровня. А как привязать статьи или категории к выпадающему трехуровневому меню, которое вы описали выше?
То есть:
Раздел -
Категория -
Подкатегория -
Статья
Статья
Подкатегория -
.......
Категория -
.............
Перерыл и Яндекс и Гугл, но ничего толкового не нашел.
Заранее спасибо за ценный совет!
любой уровень меню Joomla может отвечать за любой раздел, категорию или статью. Т.е. вы можете создавать сколько угодно элементов 3-го уровня вложенности меню и связывать с ними любые элементы Joomla.
Допустим такого вида:
В блоке "Главное меню" (раздел) две ссылки "Пупсики" и "Ёжики"(категории)-нажав на "Пупсики" видим выпавшие две ссылки "Импортные" и "Отечественные" (подкатегории Пупсиков)- нажав на "Импортные" видим ссылки на статьи, посвященные импортным пупсикам.
Грубо...получается пять уровней.
Ни в одном курсе по джумла не нашел упоминания об этом, авторы умалчивают об этом. Очевидно в джумла стандартными средствами этого не добиться.
Есть 2 варианта решения проблемы:
1) Использовать дополнительный компонент (Zoo, K2)
2)Использовать Joomla 1.6(правда она еще в стадии тестирования beta 11, но к новому году, думаю состоится релиз). В ней реализован функционал создания категорий неограниченной вложенности и много других полезных плюшек.
Чего и требовалось! Буду пробовать компоненты и ждать рабочую версию 1.6.\
Сайт добавил в закладки, чуть позже сделаю ссылочку на сайте.
Удачи!
Попробую поюзать ZOO и K2, может и получится то что хочу?!
Еще раз спасибо. Полезную работу делаете!
1. если убрать один слеш - файл не найден
2. м.б. надо указывать папку шаблона? "/templates/шаблон такой-то/js/jquery.min.js"
Желаю Вам всего хорошего
Светлана
Почему то не появляется выпадающее меню и стрелки. проверял всё несколько раз. Ссылки на файлы в index.php прописал верно. Файлы открываются. Ссылки на картинки в файле ddsmoothmenu.js тоже прописаны правильно. В чём может быть причина?
когда я пытаюсь запустить файлы скриптов из проводника, то у меня выскакивают две ошибки. в файле ddsmoothmenu - строка: 16 символ: 1 ошибка: 'navigator' - определение отсутствует код:800A1391
а в файле jquery.min строка: 12 символ: 6947 ошибка 'document' - определение отсутствует код 800A1391
может причина в этом?
С уважением, Саша.
Вот тут: http://wedal.ru/examples/menu/index.html есть работающий пример меню. Откройте его html-код, также откройте html-код вашей страницы(не шаблон, а код страницы в браузере) и сравните их.
короче исправь код, на этот
Всё сделала по пунктам...как доктор прописал!
В итоге потратила три часа, но меню так и не выпадает!!!!!
Я уже неделю ищю способ создания выпадающего меню и всё без толку! ПОМОГИТЕ!
p.s. КУДА ДЕВАТЬ ФАЙЛ index.html ИЗ МЕНЮШНОЙ ПАПКИ?
Заранее спасибо!
index.html трогать не нужно. Он для примера. С ним можно сравнить исходный код вашей страницы(точнее меню) и понять что не так(если что-то не так).
на
и тогда выпадающее заработает
Wedal поправьте плиз, чтобы народ не путался
и спасибо Вам за труд
заменяем на
div id="smoothmenu1" class="ddsmoothmenu"
Спасибо. Я просто не работал с Joomla!.
В принципе мне даже этой информации хватает к размышлению)
Попытаюсь отключить MooTools этим кодом
$user = JFactory::getUser();
if ($user->get('guest') == 1 or $user->usertype == 'Registered') {
$headerstuff = $this->getHeadData();
$tmp = array();
foreach ($headerstuff['scripts'] as $path=>$type) {
if ( !preg_match('#media/system/js#i', $path, $ar) ) $tmp[$path] = $type;
}
$headerstuff['scripts'] = $tmp;
$this->setHeadData($headerstuff);
}
Примечание: эту вставку сделать нужно перед позицией заголовков сайта
Мало ли может еще кому-нибудь понадобится
И потом всегда можно удалить мой комент...
Еще раз спасибо!
вставка съелась
jdoc:include type="head"
Inline script // из этой статьи
http://t.ru/templates/template_torus/mnav/jquery.min.js
http://t.ru/templates/template_torus/mnav/ddsmoothmenu.js
id="smoothmenu1" class="ddsmoothmenu"
все вроде правильно, консоль молчит, но в результате просто статичное меню и без 'мест' для картинок.
А может ли денвер блокировать выполнение скрипта?
PS извините за небольшой форум)
Хватает просто отключить монотулз... просто я в последний раз забыл отметить "показать все пункты меню". Огромное спасибо.
заменяем на
div id="smoothmenu1" class="ddsmoothmenu"
!!!
В чем может быть проблема?
и т.д.
Может это из-за класса moduletable?
А в исходнике у меня:
, это правильно? У меня joomla 1.5!!! Помогите плиз, сил моих больше нету!
'div id="top_menu"''div id="smoothmenu1" class="ddsmoothmenu"''div class="moduletable"''ul'
и т.д.
Может это из-за класса moduletable?
А в исходнике у меня:
'div id="top_menu"''div id="smoothmenu1" class="ddsmoothmenu"'
'jdoc:include type"modules" name="top" style="xhtml"', это правильно? У меня joomla 1.5!!! Помогите плиз, сил моих больше нету!
ps ' вместо
у меня на сайте стоит модуль по выводу новостей! News Pro GK4-называется! Он использует и подгружает свой файл скриптов! при включенном Jquery скрипт новостей конфликтует со скриптом jquery и тот (новости) соответственно не работает! Как можно обойти данную фичу? Модуль новостей уж больно хорошь)))!!!
1) погуглить по запросу jquery no conflict
2) Подобрать аналогичное меню, основанное на mootools.
"script type="text/javascript""
jQuery.noConflict();
"/script"
У меня уже есть в позиции user3 горизонтальное меню, нужно еще добавить в модуль left вертикальное меню, как?
в частности высоты
я поковырял файл стилей что то не нашел
посмотрел скрипт там размеры судя по всему переменными задаются (в скриптах я плохо разбираюсь) ну так вот как изменить ?
.ddsmoothmenu ul li a
изменяйте:
padding: 8px 10px;
Как быть?
Спасибо))) Я вот наткнулся на интересный сайт http://fancybox.net/home Там предлагают библиотеку для всплывающих окон. Выглядит очень симпатично и заманчиво. Есть инструкция http://fancybox.net/howto Там 4 строчки скрипта и 1 стилевая, вот все 5 штук я сунул между тегами . папку со скриптом запихал в корень сайта. Итог - не получилось
Прежде всего, нужно проверить правильно ли вы подключили файлы. Для этого открываем исходный html-код сгенерированной страницы и кликаем по ссылкам подключенных вами файлов. Все файлы при этом должны открываться. Если не открываются - значит не верно прописаны пути к ним.
Далее, fancybox срабатывает только если к ссылке, ведущей на увеличенное изображение картинки добавлен какой-то атрибут, что-то вроде rel="lightbox". Но это лишь пример. Как правильно смотрите в документации.
Ну и последнее, если сделано все вышеописанное, но результата нет, то возможен конфликт библиотек скриптов mootools и jquery.
Какая структура у меню должна быть это понятно. Вопрос в том какой тип пункта меню необходимо выбирать для родительских пунктов меню?
1) В коде подключения файлов допущена ошибка вот в этой строке
- пропущена папка js
2) укажите пожалуйста что скрипт ddsmoothmenu.init({
надо прописывать после подключения трех файлов через
Просто у меня как у новичка заняло время исправление этих моментов.
При изменении ЦСС и подстройкой под свой цвет столкнулся с проблемой, тонкой серенькой полоски в выпавшем меню справа!
КАК ЕЕ УБРАТЬ ???
Спасибо!!!
.ddsmoothmenu ul li a
border-right: 1px solid #777788;
Я закомментировал все уже позиции в ЦССе,
а она все ровно есть. Она находится в выпадающем меню справа от пунктов. тооооооненькая сеееееееренькая факинг полоска с которой я всю ночь боролся и пока она ведет!!!
В
.ddshadow
удалите:
background: silver;
А что пути типа
Но позиция hornav в php не изменяема
Меню, созданное на основе статьи, отлично работает в Firefox, с небольшими отклонениями в IE7, но вот в Opera, Chrome абсолютно не желает выпадать.
Скажите, такая проблема вообще есть, или это мой частный случай???
Wedal, подскажи пожалуйста, как сделать чтобы все подпункты меню выводились ко всем категориям, а не только к текущей. Ато выпадающие пункты отображаются только у текущего меню
С кодом у меня все в порядке, он работает исправно на основе каркаса джумлы. Дело в том что джумла формирует подменюшки только для текущей категории... Как это изменить?
Ещё интересно посмотреть на Ваши расценки по разработке и модификации сайтов в Joomla, они судя по порталу и Вашим знаниями не из дешевых. Но вдруг все-же окажуться привлекательными (сейчас сотрудничаю с людьми с фриланс.ру за небольшие деньги все делают, но некоторые вещи затрудняются сделать)
Например без Seo: Путь до материала joomla.test1.ru/index.php?option=com_content&view=article&id=45:joomla-community-porta ну и так далее. Соответственно корнем считается joomla.test1.ru/
А теперь вруби Seo: joomla.test1.ru/index.php/the-news
Соответственно корень для скрипта уже joomla.test1.ru/index.php/the-news/ - а это то и каталогом не является...
Вот сижу, ломаю голову как бы ткнуть универсальный путь в js.
Придумаю - отпишусь )))
Супер статья! )))
Я, к сожалению, не нашёл такой строчки:
jdoc:include
Вообще.
Как мне быть?
Есть только вот что:
if ( mosCountModules( 'user3' ) > 0){
Код:
<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>
Поставил ваш шаблон с уже интегрированным меню ничего не видно одна ссылка Главная
согласен ....та же проблема ....Неделю мучаюсь уже ... вот меню которое не могу вставить: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html
Был бы очень благодарен если ктонить поможет ....
Вопрос аналогичен с Nik'овским
а на выходе:
Услуги ремонта и обслуживания
и собственно ничего не работает
Штука вот в чём.
Вставил все в принципе работает. НО, работает только для Пункта1 Меню(тобишь выводит только из Пункта1.Меню его подпункты) с Меню.Пункта2 с Меню.Пункта3 и т.д. не показывает подпнукты. Где рыть так и не пойму.
Открывал код уже сгенерированых страниц, так там почему то только в етом МЕню.Пункт1 есть под меню, а в остальных как буто нету. Где их искать? В админке ведь они есть
J1.6.
Сейчас у меня другая проблема, иконки стрелок отображаются только на первой странице, после перехода в любой пункт меню они пропадают. Что это может быть?
Но при собственно выпадении меню вся страница так же сползает вниз!!!
Куда копать, не подскажете?
У нас есть js меню, интегрировать - интегрировали, т.е. меню отображается,js функционирует,картинки отображаются ( встроены в меню). Но как связать это меню с Joomla? Как совместить ссылки в html с разделами статьями и т.п в Joomla?
p.s. меню подключено полностью, но нету связи ссылок в html с Joomla. Как их задать? Помогите пожалуйста
RSS лента комментариев этой записи