Навигация със стълбищни ефекти
В този урок ще анализираме въпроса за създаването на визуален ефект за менюто за навигация. Когато задържите курсора на мишката върху елемент от менюто, той ще се превърне в „най-високото“ стъпало на стълбата, а елементите преди и след него ще бъдат „отдолу“. Опростен ефект, но рядко се вижда при проекти. Вероятно основната причина е, че няма начин да се избере "предишния" елемент в CSS.
Можете да изберете "следващи" елементи в CSS. Можете да използвате генерализирания комбиниран комбинат или селектори за съседи, за да получите всички от следните елементи (които могат да бъдат оковани). Но нито един от тях не ви позволява да получите предишните елементи за изграждане на структурата, показана на снимката по-горе.
Вместо да се занимаваме с CSS, за да направим това, нека използваме технология, която всъщност може да избере предишния елемент: jQuery. jQuery има функция .prev () (както и няколко други подобни функции), за да ни помогне да получим това, от което се нуждаем.
Предполага се, че всички класове трябва да бъдат премахнати за всички елементи в събитието на мишката. Това означава, че ще бъде по-ефективно да имате указател към всички необходими елементи.
Инсталацията може да бъде направена по-ефективна. Използването на функциите .next () и .prev () принуждава jQuery да навигира в DOM структурата, за да разбере от какво се нуждае. Веднага можем да избираме елементи въз основа на това, което вече е избрано, използвайки позиция в комплекта. Функцията .index () ще ни помогне да определим местоположението, а функцията .eq () ще избере елемент въз основа на индекса.