Хочу познайомити Вас з першою версією мого плагіна для меню, що випадає. На даний момент ця версія дозволяє додати ефекти slide і fade, як окремо так і разом, для списку горизонтальної навігації. Плагін призначений для дворівневої навігації - видимий і вкладений список.
В майбутньому я хочу модифікувати його до більш універсальної версії, з можливістю відображення багаторівневої навігації як вертикальної так і горизонтальної. Але поки продемонструю ті можливості які можна спостерігати зараз.
Розглянемо детальніше структуру HTML і CSS коду для прикладу. Я опущу елементи які не важливі для меню, що випадає і відповідають за вид навігації і виділю лише ті які потрібні для плагіна.
Для списку нам потрібен батько для маніпулювання висотою об'єкта, це потрібно для slide ефекту, з fade ефектом його можна не вставляти.
Тепер детальніше по плагіну:
Детальніше за параметрами:
Показання параметри є параметрами за замовчуванням.
- duration - час анімації в мілісекундах (300 = 0.3сек)
- hoverElement - елемент на який буде ставиться клас "hover".
- hoverClass - назва класу для елемента при Ховер
- dropHolder - селектор елемента батька для вкладеного списку
- showEffect - ефект випадання вкладеного списку (slide, fade, slidefade)
Розглянемо ще кілька прикладів: