Дропдаун, выпадающее меню с эффектами на 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)
понял вас..
а есть шанс реализации этой функции в ближ время? 7-10 дней
или стоит искать другие решения..?(
очень жаль..
а есть надежда что время появится и реализация воплотится в жизнь..в ближ 7-10 дней?
или шансов мало и стоит исктаь другие решения..?
Возникла проблема в хроме, если в выпадающем списке будут инпуты, то при наведении активируется эффект затухания. Как посоветуете исправить?