Последовательное отображение пунктов подменю

Я создаю панель навигации и пытаюсь добавить этот эффект: когда вы наводите курсор на элемент главного меню, каждый элемент подменю под ним появляется с небольшой задержкой. Как один за другим.

Я немного сделал это, но это очень глючит. Иногда задержки занимают слишком много времени, иногда второй подпункт появляется раньше первого! И что самое ужасное, когда вы убираете мышь с основного пункта, список под ним исчезает! В общем не очень гладко. Вот код, который у меня есть сейчас.

HTML

<div id="navbar">
    <ul id="main-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Members</a>
            <ul>
                <li><a href="#">Sub item 1</a></li>
                <li><a href="#">Sub item 2</a></li>
            </ul>
        </li>
        <li><a href="#">Events</a>
            <ul>
                <li><a href="#">Sub item 3</a></li>
                <li><a href="#">Sub item 4</a></li>
            </ul>
        </li>
        <li><a href="#">Publications</a>
            <ul>
                <li><a href="#">Sub item 5</a></li>
                <li><a href="#">Sub item 6</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>​

CSS

#navbar { width:550px; height:30px; position:relative; float:right; right:-7px; top:30px; }

#main-menu { width:100%; float:right; list-style:none; }

#main-menu li { float:left; }

#main-menu li a { display:block; text-decoration:none; color:#000; background-color:#FC0; padding:8px; margin-right:10px; }

#main-menu li ul { display:none; z-index:999; }

#main-menu li:hover ul { display:block; position:absolute; }

#main-menu li li { display:block; float:none; }

JQuery

$(document).ready(function(e) {

    $('#main-menu li a').hover(function()
    {
        $(this).animate({
            backgroundColor : '#C60'
        },200);

        $('#main-menu ul li').each(function(e) {
            $(this).delay(e * 200).hide().fadeIn(200);                                     
        });

    }, function(){
        $(this).animate({
            backgroundColor : '#FC0'
        },200);
    });

});​

См. эту скрипку здесь.

Как я могу сделать его гладким, функциональным?


drop-down-menu jquery menuitem submenu
person Isuru    schedule 02.11.2012    source источник
comment
Вам нужно использовать setTimeout и cleartimeout вместо delay. Таким образом, вы можете лучше контролировать тайм-ауты. delay использует то же самое, но у вас нет указателя тайм-аута для очистки тайм-аутов после прекращения зависания и т. д.   -  person Liam    schedule 02.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вместо этого я бы использовал переходы CSS, чтобы исчезать элементы меню (и устанавливать цвета фона). Все, что вам нужно сделать, это рассчитать задержку перехода для каждого дочернего li с помощью jQuery при первой загрузке. Например:

$('#main-menu li ul li').each(function() {
    var delay = $(this).index() * 200 + 'ms';

    $(this).css({
        '-webkit-transition-delay': delay,
        '-moz-transition-delay': delay,
        '-o-transition-delay': delay,
        'transition-delay': delay
    });                  
});

Затем установите соответствующие переходы на элементах. Вот рабочий jsFiddle: http://jsfiddle.net/Hjxp5/8/

person Christian    schedule 02.11.2012
comment
Спасибо, Кристиан, это хороший способ сделать это, но переходы CSS не полностью поддерживаются в каждом браузере на данный момент, верно? Так что это будет проблемой. - person Isuru; 02.11.2012
comment
Они поддерживаются во всех основных браузерах, кроме IE10. Вы также можете добавить свойство -ms-transition для дальнейшей поддержки. Не забывайте, что это меню по-прежнему работает в старых браузерах, просто оно не будет анимироваться. И если кто-то использует браузер, который не поддерживает переходы CSS, ему не нужны никакие причудливые эффекты. Код для будущего, а не для прошлого. - person Christian; 03.11.2012
comment
Я понимаю. Вы сделали хороший, верный вывод. Еще раз спасибо. Я буду использовать этот метод. :) - person Isuru; 03.11.2012