Дропдаун, выпадающее меню с эффектами на 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'
    });                
});

Вы можете открыть пример в новом окне.

Скачать плагин

Tags: , , , ,

Воскресенье, Апрель 26th, 2009 CSS, HTML, JS Plugins, JavaScript, jQuery

53 Коментариев to Дропдаун, выпадающее меню с эффектами на jQuery

  • Дмитрий:

    понял вас..

    а есть шанс реализации этой функции в ближ время? 7-10 дней

    или стоит искать другие решения..?(

  • Дмитрий:

    очень жаль..

    а есть надежда что время появится и реализация воплотится в жизнь..в ближ 7-10 дней?

    или шансов мало и стоит исктаь другие решения..?

  • ван:

    Возникла проблема в хроме, если в выпадающем списке будут инпуты, то при наведении активируется эффект затухания. Как посоветуете исправить?

  • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы