Інтеграція випадаючого jQuery-меню у шаблон Joomla
Щоб поставити всі крапки над "i", я розповім про інтеграцію поетапно, показавши кожен етап на прикладі. Крім того, наприкінці статті ви зможете знайти всі файли-вихідники для цього уроку, щоб кожен міг сам спробувати провести інтеграцію jQuery-меню до шаблону Joomla.
Отже, по-перше, треба розібратися з тим, що, власне, ми інтегруватимемо. Меню, побудованих на jQuery, маса, але для першого разу я взяв не дуже ефектне, проте просте, що випадає горизонтальне меню під назвою Smooth Navigational Menu.
Приклад можна побачити тут.
Меню складається з 5 файлів:
- 2 картинки (стрілки вправо та вниз);
Також нам знадобиться, власне, бібліотека jQuery:
Також я взяв шаблон first_template із серії статей «Робота із шаблонами Joomla».
Таким чином, вихідними даними у нас будуть 5 файлів меню та шаблон Joomla.
Тепер треба зрозуміти, що з усім цим добром робити. Розіб'ємо весь процес інтеграції на етапи.
Перший етап інтеграції. Копіювання файлів.
Перш за все нам потрібно перенести файли меню в папку з шаблоном і розкласти їх по своїх місцях. На даний момент у нашому шаблоні є папки: css, images та html. Додамо до них ще одну папку js. Взагалі, саме така назва папки не є обов'язковою. Її можна назвати і по-іншому, але заведено так.
Тепер розкидаємо файли нашого меню, що випадає, за відповідними папками, а саме:
– ddsmoothmenu.js та jquery.min.js у папку js;
– ddsmoothmenu.css до папки css;
– 2 картинки зі стрілками у папку images.
От і все. У цьому перший етап інтеграції закінчено. Поки що просто, чи не так? :-)
Другий етап інтеграції. Підключення файлів меню до шаблону Joomla.
Першим діломдодамо невеликий скіпт у файл index.php нашого шаблону. Він повинен знаходитися між тегами і :
Цей код наведено в інструкції з підключення на сайті розробника меню. Зазвичай достатньо підключення файлів, про яке написано нижче, але в даному випадку необхідний і цей код.
Тепер потрібно підключити скопійовані файли. Це також робиться досить легко. Відкриваємо файл index.php нашого шаблону між тегами і додаємо наступні рядки:
Перший рядок буде відповідати за підключення css-файлу меню до шаблону, а другий і третій за підключення js-файлів.
Щоб перевірити, чи всі файли підключені, потрібно оновити сторінку та переглянути її вихідний код. Це можна зробити, клацнувши по сторінці правою кнопкою миші і вибравши пункт «Вихідний код сторінки» (такий пункт у Firefox, в інших браузерах напис може відрізнятися). Після цього з'явиться HTML-код згенерованої сторінки. У цьому коді між тегами і мають з'явитися додані посилання. При цьому при натисканні на них повинен відкриватися відповідний файл. Це потрібно перевірити, щоб уникнути непорозумінь надалі.
Після того, як все перевірено, другий етап інтеграції закінчено.
Третій етап інтеграції. Підключення стилів до меню Joomla.
Для функціонування нашого меню, що випадає, нам залишилося його створити і підключити до нього відповідні стилі. Тут виникає питання: «як підключити необхідні класи до меню Joomla?».
Для правильного функціонування меню li ul нам потрібно помістити його в контейнер DIV з певним ідентифікатором і класом, а саме: