Скролююче меню на jQuery для Joomla - Школа Joomla
Навчитесь створювати свої власніунікальні тапрофесійні шаблони дляJoomla 2.5!
Ласкаво просимо до школи Джумла!
ЗАВАНТАЖИТИ СТАБІЛЬНУ ВЕРСІЮ ДЖУМЛА
Скролююче меню на jQuery для Joomla
Привіт, друзі. Багато відвідувачів сайту запитують, як я зробивгоризонтальне меню, якепри скролінгу сторінки внизпереміщається у верхню частину вікна браузера і залишається там весь час. Все досить просто. Для реалізації цього ефекту необхідно використовувати бібліотеку javascriptjQuery. Ось що треба зробити.
Для початку, завантажуємо з офіційного сайту цю бібліотеку, та копіюємо її в папку зі скриптами нашого шаблону. Нехай це буде папка під назвоюjs. Отже, копіюємо файл бібліотеки в цю папку і прикріплюємо його вindex.php файл шабона за допомогою такого коду:
Деjquery-1.7.2.min.js – ім'я файлу бібліотеки jQuery (цей файл розміщено також у вкладеннях до цієї статті).
Далі, необхідно скористатися скриптом nagging-menu.js, який також прикріплюємо в index.php файл шабона за допомогою такого коду:
Цей файл також розміщений у вкладеннях до цієї статті.
Нехай модуль нашого меню розміщений у позиції middlemenu (як у мене на сайті). І контейнер, в якому вона знаходиться, має ідентифікаторmiddlemenu. Ось як це виглядає:
Далі, прописуємо даному контейнеру клас:
А у файлі каскадних таблиць стилів для даного класу прописуємо правила стилів, які мають використовуватись при нормальному відображенні меню на сторінці. У моєму випадкуклас default має таке визначення:
Це означає, що контейнер, в якому розміщено наше меню, маєвідносне позиціонування. Майте на увазі, що для різних варіантів верстки сторінки значення даного класу може бути різним. Все залежить від стилю верстки сторінки.
Далі, додаємо ще одинклас fixed у файл стилів:
Це означає, що з даного класу прописана фіксована позиція. До того ж, він має зовнішню тінь завтовшки 10 пікселів, зрушений нагору також на 10 пікселів за допомогою команди top і поміщений на передній план, використовуючи команду z-index.
Єдине, що залишилося, так це відкрити скриптnagging-menu.js і прописати назву ідентифікатора контейнера, що містить наше меню, тобто прописати#middlemenu :
Тепер поясню, як діє скрипт. У нормальному режимі, коли користувач не прокручує сторінку сайту вниз у вікні свого браузера, для контейнера меню з ідентифікатором #middlemenu застосовується дії класу default .
Коли користувач починає прокручувати сторінку, топочинає діяти скрипт nagging-menu.js, замінюючи для контейнера #middlemenu клас default на клас fixed. Таким чином, при прокручуванні сторінки діють правила стилів класу fixed, які за допомогою фіксованого позиціонування поміщають меню вгору вікна браузера.
Коли користувач повертається на початок сторінки, знову починають діяти правила класу default, які повертають меню в нормальний вигляд.
Ось у принципі і все. Сподіваюся, тепер і ви зможете використати такий ефект для меню на своєму сайті. Успіхів.