Не так давно вирішив додати динаміки в верхнє меню на своєму сайті. Ви напевно звернули увагу на те, як ковзає виділена область елемента в верхньому меню на цьому сайті.
Для того, щоб не винаходити велосипед, в першу чергу я вирішив пошукати готові рішення в Інтернеті і як виявилося не дарма. Існує спеціальний плагін для jQuery. який називається LavaLamp.
У цій статті ми розберемо створення динамічного меню з використанням плагіна LavaLamp в деталях.
Отже, перш ніж продовжити, погляньте на приклади менюшек, які можна створити використовуючи цей плагін.
Bottom Style
Симпатично, чи не так?
Створюються такі менюшки елементарно! Насамперед створимо html-код меню:
Даному елементу меню прописуються стилі активного меню (активне виділення) і абсолютно позиціонують всередині меню. Тим самим при наведенні курсору миші на елемент меню ми змінюємо CSS властивість left і змушуємо його рухатися в потрібну сторону. А для того щоб текст елементів меню знаходився зверху над виділеною областю Z-index йому ставлять менше, ніж у інших елементів меню
З алгоритмом роботи плагіна розібралися, тепер поглянемо на стилі:
Насамперед ставимо стиль для списку «ul» з яскраво-оранжевим фоновим зображенням і задаємо деякі основні властивості, такі як висота, ширина, відступи, поля і т.д. Ми використовуємо відносне позиціонування, тому що, таким чином ми можемо абсолютно позиціонувати «li» по відношенню до «ul». Це дозволяє вільно рухати «li» всередині батьківського «ul»
Далі ми задаємо «li» CSS властивість «float: left», тим самим надаємо горизонтальне розташування всіх елементів меню.
І нарешті, стиль для посилань, які представляють фактично інтерактивну частину кожного пункту меню. Ці стилі в основному косметичні.
Залишилося підключити скрипт бібліотеки jQuuery і плагіна lavalamp на сторінку. Для цього між тегами
розмістіть наступний код:Плагін jquery.easing.js потрібен для додання красивих ефектів при анімації. Він не обов'язковий! Завантажити його можна тут. а сам плагін lavaLamp тут
Плагін lavaLamp підтримує наступні параметри: пом'якшення «fx», швидкість анімації «speed» і третій параметр це callback-функція, яка буде викликана при кліці на елемент меню. Всі ці параметри є необов'язковими і, типові для таких значень: «fx» - «linear», «speed» - 500 мсек.
А для того, щоб виділена область поверталася на місце, необхідно потрібного елементу меню задати клас «current»
Завантажити вихідні менюшек можна тут
На цьому мабуть все! Сподіваюся даний матеріал був Вам корисний ?!
Щоб посилання працювали, просто видаліть цей шматок коду, при виклику плагіна!
Оцініть цю статтю: