Дропдаун, выпадающее меню с эффектами на jQuery
Хочу познакомить Вас с первой версией моего плагина для выпадающего меню. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации. Плагин предназначен для двухуровневой навигации – видимый и вложенный список.
В будущем я хочу модифицировать его до более универсальной версии, с возможностью отображения многоуровневой навигации как вертикальной так и горизонтальной. Но пока продемонстрирую те возможности которые можно наблюдать сейчас.
Пример №1 выпадающего меню (slide эффект):
Вы можете открыть пример в новом окне.
Рассмотрим детальнее структуру HTML и CSS кода для примера. Я опущу элементы которые не важны для выпадающего меню и отвечают за вид навигации и выделю лишь те которые нужны для плагина.
HTML код:
<li>
<a href="#">Навигация</a>
<div>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">MooTools</a></li>
<li><a href="#">JS Plugins</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</li>
...
<li>
<a href="#">Ссылки</a>
<div>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">MooTools</a></li>
<li><a href="#">JS Plugins</a></li>
</ul>
</div>
</li>
</ul>
Для выпадающего списка нам нужен родитель для манипулирования высотой объекта, это нужно для slide эффекта, с fade эффектом его можно не вставлять.
CSS код:
position:relative;
}
#nav li div {
position:absolute;
top:15px;
left:-9999px;
}
#nav li.hover div {left:0;}
Для родительского элемента лучше не задавать никаких стилей кроме позиционирования относительно родителя. самое главное на что хочу обратить Ваше внимание, для скрытия вложенного списка я использую left:-9999px; а не display:none, т.к. при display:none JavaScript не может адекватно определить текущие параметры элемента – высоту и т.п. В общем в примере стили очень просты, задается лишь положение вложенного элемента, конечно же вы можете определять дополнительные свойства соответствующие вашему дизайну.
Теперь детальнее по плагину:
<script type="text/javascript" src="js/jquery.dropDown.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#nav').NavDropDown({
duration:300,
hoverElement:'li',
hoverClass:'hover',
dropHolder:'div',
showEffect:'slide' // slide, fade, slide&fade
});
});
</script>
Детальнее по параметрам:
Показанные параметры являются параметрами по умолчанию.
- duration – время анимации в миллисекундах (300 = 0.3сек)
- hoverElement – элемент на который будет ставится класс “hover”.
- hoverClass – название класса для элемента при ховере
- dropHolder – селектор элемента родителя для вложенного списка
- showEffect – эффект выпадения вложенного списка (slide, fade, slide&fade)
Рассмотрим еще несколько примеров:
slide&fade эффект
$('ul#nav').NavDropDown({
duration:500,
showEffect:'slide&fade'
});
});
Вы можете открыть пример в новом окне.
fade эффект
$('ul#nav').NavDropDown({
duration:800,
showEffect:'fade'
});
});
Вы можете открыть пример в новом окне.
Скачать плагин
53 Коментариев to Дропдаун, выпадающее меню с эффектами на jQuery
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
очень хороший плагин, спасибо
Спасибо, отличный плагин, очень помогло (:
Молодчага! Всё очень полезно и познавательно! Буду заходить регулярно!
Подскажи, пожалуйста, где регулировать тот момент, что когда меню выезжает оно полностью просвещается и сквозь него видно весь низлежащий контент, а само меню соответственно портиться. Перепробовал в js все opacity, но ничего не нашел.
> SergAntDnepr
немного непонятно изложена проблема… в каком именно браузере вы открываете свое меню?
Бываю нюансы в отображении fade эффекта у IE когда в фоне лежит png.
Еще один вариант – попробуйте сделать только slide эффект showEffect:’slide’… если и в этом случае ваше меню отображается некорректно, то скорее проблем в верстке.
http://futsaldnepr.narod.ru/arbitr/example3.html Можно посмотреть здесь. Не пойму только что со шрифтом.
Все очень просто… дело не в JS а в верстке,
поставьте у себя в стилях такие свойства:
#container {
position:relative;
z-index:1;
}
#main-container {
position:relative;
z-index:2;
}
Огромное спасибо! Заработало! Может ещё подскажите, что всё-таки с кодировкой. Валидатор вроде всё устраивает.
Воспользуйтесь Notepad++ и перекодируйте в windows-1251 HTML файл.
ли поставте внутреннюю кодировку UTF-8…
а вообще проблема может быть не только в сайте но и в сервере
Спасибо! Разобрался. Всё таки мир не без добрых людей!
Просмотрел и прочитал статьи! Заслуживает уважения и знания и желание ими поделиться с другими! Надеюсь запал не угаснет и будут еще статьи не менее полезные!
Удачи в делах и приятной работы!
“Респект тебе и уважуха” как сказал бы мой приятель :)
Отличный плагин. Спасибо его создателю.
Я вставил его на свою страницу, меню работает корректно, а вот текст на странице не отображается, он как бы лежит под слоем этого меню.
Подскажите как решить эту проблему.
Что бы сказать точно в чем у вас причина – нужно видеть ваш пример.
Попробуйте разрулить позицию слоя через z-index
>Алексей
Попробовал z-index всё равно не работает… даже не знаю что делать…
Вышлете ссылку на Ваш сайт через вкладку “Контакты” гляну, может что-то подскажу.
У меня страница ещё в разработке)))
А я решил свою проблему!))).
Ещё раз спасибо за плагин.
Огромное спасибо за скриптину все работет превосходно только мешает жить один баг проявляющийся только в IE 7. На сайте есть две картинки расположенные по разные стороны шапки из них должна с помощью скрипта выпадать инфа но вот работает только первая картинка по порядку вторая не реагирует на наведение. Подскажите пожалста решение проблемы заранее спасибо.
Что бы ответить точно на ваш вопрос нужно как минимум увидеть баг… но скорее всего дело не в ДЖС а в верстке.
http://www.bagira.org насчет верстки не уверен потому что только в IE 7 проявляется но этот вариант отвергать тоже не буду. На сайте есть две “лапки” меню и корзина обе на вашем скрипте. Если проблема не в скрипте то очень извеняюсь и надеюсь что и в таком случае Вы тоже сможете подсказать решение.
Первое что бросается в глаза… у вас два одинаковых ID на разных элементах, ID должен быть уникальным… скорее всего из-за этого и не работает скрипт. Кстати он у вас не работает во всех версиях Е 6-8. За IE6 я вообще молчу, там то и с версткой не все впорядке.
Очень хороший эффект.
Но если верхний пункт меню будет, например, в две строки, то выпадающая часть будет перекрывать вторую строку. если столбцы необходимо сделать разных цветов, то тоже возникают вопросы, на которые я увы не могу ответить)
А как моместить меню посредине страницы?
:) в параметрах меню такого нет… это уже зависит от вашей верстки. Если ваше меню имеет определенную ширину, то можно указать width и margin:0 auto;
А можно воспользоваться методом Горизонтальное центрирование блока произвольной ширины
да будет перекрывать… плагин лишь добавляет эффект для дропа, но не учитывает стили верхнего уровня.