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

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

1.

99K

03 сентября 2017 года

Андрей Автомонов

0 / / 03.09.2017

3 сентября 2017, 10:02:42

в примере не подтянулись стили/скрипты