Мне понадобилось сделать дроп даун меню. Причем из всей линейки только у одного пункта. Не хотелось привлекать тяжеловесные плагины для jQuery, но что поделаешь, раз надо так надо. Тяжеловесные это сколько? 5-15К. Причем 5К, если без учета еще пары сторонних необходимых плагинов. В общем не так смертельно.
Подключить плагин было просто. Настоящей проблемой оказалось натянуть необходимый дизайн. Я честно попробовал три. В каждом прилагался CSS файл, который преполагал всю свободу стилей. Не тут то было. Один не давал возможности сделать разные стили для верхней линейки и выпадающего списка. В другом не удалось сделать полупрозрачный фон, задуманный дизайнером. А третий вообще перестал работать, когда сделаны были необходимые отступы. Ему надо было, чтоб элементы немного накладывались друг на друга.
Вполне возможно, что я просто не умею готовить CSS. Но я уже потратил почти день на какой-то жалкий дропдаун. Стыд! Естественно я стал думать, что я могу сделать сам по-быстрому. Самый сложный момент – когда мышь тащится от верхней линейки к дропу, надо не потерять его. Заморачиваться с таймаутами. Ы-ы-ы…
Нот тут мне пришла идея. Holy jQuery!!! У него в ядре есть такая вешь, как анимация… Подумано – сделано! В результате весь код даже не нужно было оформлять в плагин или функцию. Все сделано в двух HTML тегах:
…
<div id=«dropdown»
style=«display:none;position:absolute;»
onMouseOver="$(this).stop()"
onMouseOut="$(this).animate({marginBottom:0},500,'',function(){$(this).fadeOut()})"
>
...dropdown contents…
Здесь показан лишь принцип: два основных элемента, которые заполняются по мере надобности и позиционируются относительно друг друга по вашему вкусу. Дается 500 миллисекунд (полсекунды) чтобы мышь можно было передвинуть в зону дропдауна. Анимация marginBottom лишь для того, чтобы анимировать что-нибудь невидимое и ненужное. От самой анимации нам лишь надо время ее выполнения.
В принципе таким образом можно и все меню сделать. Правда только в один уровень вложения. Но за то никаких плагинов и разбирательств в чужих мутных стилях. Quick & dirty!
Подключить плагин было просто. Настоящей проблемой оказалось натянуть необходимый дизайн. Я честно попробовал три. В каждом прилагался CSS файл, который преполагал всю свободу стилей. Не тут то было. Один не давал возможности сделать разные стили для верхней линейки и выпадающего списка. В другом не удалось сделать полупрозрачный фон, задуманный дизайнером. А третий вообще перестал работать, когда сделаны были необходимые отступы. Ему надо было, чтоб элементы немного накладывались друг на друга.
Вполне возможно, что я просто не умею готовить CSS. Но я уже потратил почти день на какой-то жалкий дропдаун. Стыд! Естественно я стал думать, что я могу сделать сам по-быстрому. Самый сложный момент – когда мышь тащится от верхней линейки к дропу, надо не потерять его. Заморачиваться с таймаутами. Ы-ы-ы…
Нот тут мне пришла идея. Holy jQuery!!! У него в ядре есть такая вешь, как анимация… Подумано – сделано! В результате весь код даже не нужно было оформлять в плагин или функцию. Все сделано в двух HTML тегах:
<span
onMouseOver="$('#dropdown').stop().fadeIn()"
onMouseOut="$('#dropdown').animate({marginBottom:0},500,'',function(){$(this).fadeOut()})"
> ...touch spot... …
<div id=«dropdown»
style=«display:none;position:absolute;»
onMouseOver="$(this).stop()"
onMouseOut="$(this).animate({marginBottom:0},500,'',function(){$(this).fadeOut()})"
>
...dropdown contents…
Здесь показан лишь принцип: два основных элемента, которые заполняются по мере надобности и позиционируются относительно друг друга по вашему вкусу. Дается 500 миллисекунд (полсекунды) чтобы мышь можно было передвинуть в зону дропдауна. Анимация marginBottom лишь для того, чтобы анимировать что-нибудь невидимое и ненужное. От самой анимации нам лишь надо время ее выполнения.
В принципе таким образом можно и все меню сделать. Правда только в один уровень вложения. Но за то никаких плагинов и разбирательств в чужих мутных стилях. Quick & dirty!
