Мне нужно было сделать выпадающее меню.
Причём из всей линейки он есть только у одного товара.
Использовать сверхмощные плагины jQuery не хотелось, но что поделаешь, раз это необходимо.
Тяжелый вес это сколько? 5-15К.
Причём 5К, если без учёта пары сторонних необходимых плагинов.
В целом это не так уж и смертельно.
Подключить плагин было легко.
Настоящей проблемой было добиться соответствия дизайну.
Честно говоря, я попробовал три.
Каждый из них поставлялся с файлом CSS, что давало полную свободу стиля.
Не так.
Не дали возможности сделать разные стили для верхней строки и выпадающего списка.
В другом не удалось создать задуманный дизайнером полупрозрачный фон.
А третий вообще перестал работать, когда были сделаны необходимые углубления.
Ему нужно было, чтобы элементы немного перекрывали друг друга.
Вполне возможно, что я просто не умею писать CSS. Но я уже потратил почти день на какой-то жалкий выпадающий список.
Стыд! Естественно, я начал думать, что можно сделать самому быстро.
Самый сложный момент – когда мышь тянется от верхней линии к капле, нельзя ее потерять.
Беспокойтесь о тайм-аутах.
Д-у-у.
Но тут мне пришла идея.
Святой jQuery!!! По своей сути есть такое понятие как анимация.
Задумано - сделано! В результате весь код даже не нужно было упаковывать в плагин или функцию.
Все делается в двух HTML-тегах: <span
onMouseOver="$('#dropdown').
stop().
fadeIn()" onMouseOut="$('#dropdown').
animate({marginBottom:0},500,'',function(){$(this).
fadeOut()})" > .
touch spot.
…
выпадающее содержимое… Здесь показан только принцип: два основных элемента, которые заполняются по мере необходимости и располагаются друг относительно друга по вашему вкусу.
500 миллисекунд (полсекунды) дается на то, чтобы мышку можно было переместить в выпадающую зону.
Анимация поля MarginBottom предназначена для анимации чего-то невидимого и ненужного.
Все, что нам нужно от самой анимации, — это время ее выполнения.
В принципе, так можно сделать всё меню.
Правда, только при одном уровне инвестиций.
Но для этого никаких плагинов и триалов в чужих мутных стилях.
Быстро и грязно! Теги: #jQuery #выпадающий список #Чулан
-
Расширение С Забавной Историей
19 Oct, 24 -
Начался Фестиваль Reactos Hackfest
19 Oct, 24 -
Подкаст Noname S04E05
19 Oct, 24
