Навігація з ефектом сходів
У цьому уроці ми розберемо питання створення візуального ефекту для меню навігації. При наведенні курсору миші на пункт меню він ставатиме найвищою сходинкою, а пункти до і після нього будуть сходинками нижче. Простий ефект, але він зустрічається рідко у різних проектах. Ймовірно, основна причина - немає можливості вибрати "попередній" елемент CSS.
Можна вибрати "наступні" елементи в CSS. Можна використовувати узагальнений комбінатор сусідів чи сусідні селектори щоб одержати всіх таких елементів (які можна побудувати в ланцюжок). Але жоден із них не дозволяє отримувати попередні елементи, щоб побудувати структуру, зображену на малюнку, наведеному вище.
Замість того, викривлятися з CSS для вирішення такого завдання, застосуємо технологію, яка може вибрати попередній елемент: jQuery. jQuery має функцію .prev() (а також кілька інших подібних функцій), яка допоможе нам отримати те, що потрібно.
Ймовірно, потрібно видаляти всі класи для всіх елементів у події, що використовуються. Отже, найефективніше буде наявність покажчика попри всі необхідні елементи.
Установку можна зробити ефективнішою. Використання функцій .next() і .prev() змушує jQuery рухатися структурою DOM, щоб обчислити потрібне. Ми можемо відразу вибрати елементи, ґрунтуючись на тому, що вже вибрано, використовуючи положення у наборі. Функція .index() допоможе нам визначити місце, а функція .eq() вибере елемент на основі індексу.
CSS відповідає за дизайн
Весь ефект сходів ґрунтується на таких класах.
Верхня сходинка (stair-1) збільшується, зміщується праворуч і має велику тінь. Для кожної наступної сходинки ці властивості трохи зменшуються. Тут можназробити все, що завгодно для суміщення із загальним стилем програми.
Плагін jQuery?
Заголовок даного розділу підводить нас до цікавої теми.
Чи потрібно робити плагін для описаного ефекту? З одного боку, він дуже залежить від CSS. jQuery фактично тільки призначає та прибирає класи, а вся анімація та візуальні властивості розміщуються у CSS.
Тим не менш, ми зробимо плагін, тому завдання дуже цікаве.
Опції плагіна
Ми зробимо простий набір доступних опцій: скільки щаблів використовується в ефекті. Плагін буде викликатись для навігаційного елемента, який містить лише посилання:
Потім у плагіні, ми робимо змінну "stairs", яка міститиме або передане значення, або значення за промовчанням.
Такий шаблон допомагає автоматично встановлювати значення змінної: якщо користувач встановив значення, використовуємо їх, а якщо ні – беремо значення за промовчанням.
Для використання опції потрібно запустити цикл for стільки разів, скільки є щаблів. Ми встановлюємо значення індексу та перевіряємо, щоб ніколи не використовувати для вибору негативних значень.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: css-tricks.com/stairway-navigation-a-jquery-plugin/ Переклав: Сергій Фастунов Урок створений: 21 Листопада 2012 Переглядів: 22919 Правила передруку
5 останніх уроків рубрики "CSS"
Смішні ефекти для літер
Невеликий ефект з інтерактивною анімацією букв.
Реалізація кумедних підказок
Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.
Анімовані літери
Експеримент: анімовані букви SVG на базі бібліотеки anime.js.
Сонцезахисні окуляри від першої особи
Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Навігація, що розкривається
Експериментальний скрипт навігації, що розкривається.