CodeNet / Языки программирования / Java Script / jQuery
Дропдаун, выпадающее меню с эффектами на jQuery
Хочу познакомить Вас с первой версией моего плагина для выпадающего меню. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации. Плагин предназначен для двухуровневой навигации – видимый и вложенный список.
В будущем я хочу модифицировать его до более универсальной версии, с возможностью отображения многоуровневой навигации как вертикальной так и горизонтальной. Но пока продемонстрирую те возможности которые можно наблюдать сейчас.
Пример №1 выпадающего меню (slide эффект)
Рассмотрим детальнее структуру HTML и CSS кода для примера. Я опущу элементы которые не важны для выпадающего меню и отвечают за вид навигации и выделю лишь те которые нужны для плагина.
HTML код:
<ul id="nav"> <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 код:
#nav li { 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-1.3.2.min.js"></script> <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 эффект
$(document).ready(function(){ $('ul#nav').NavDropDown({ duration:500, showEffect:'slide&fade' }); });
Вы можете открыть пример в новом окне.
fade эффект
$(document).ready(function(){ $('ul#nav').NavDropDown({ duration:800, showEffect:'fade' }); });
Вы можете открыть пример в новом окне.