Двойное меню при наведении курсора? - PullRequest
Новая
       16

Двойное меню при наведении курсора?

1 голос
/ 31 августа 2011

У меня есть грубое скользящее меню, как показано здесь:

http://www.clients.eirestudio.net/ttt/

Это работает по большей части, но я хочу иметь возможность навести курсор на список, а на список нетчтобы спрятаться снова.

Есть идеи?

Мой код: 

/*
    Sliding Main Menu
    */

    $('ul#side_menu_list').hover(function()
    {
        $(this).show();
    });

    $('span#side_menu').hover(function()
    {
        $('ul#side_menu_list').stop().animate
        ({
            left:"-=130px"},150);

        $(this).stop().animate
        ({
            left:"-=92px"},150);
        }, 
        function(){

            $('ul#side_menu_list').stop().delay(400).animate
            ({
                left:"125px"},150);
            $(this).stop().animate
            ({
                left:"45px"},150);
    });

1 Ответ

2 голосов
/ 31 августа 2011

Я бы поместил их в оболочку 

<div class="popout">
    <span id="side_menu">Click</span>
    <ul id="side_menu_list">
        <li><a href="">bingo reviews</a></li>
        <li><a href="">new bingo sites</a></li>
        <li><a href="">no deposit bingo</a></li>
    </ul>
</div>

И затем сделал бы функцию наведения на классе "popuout" 

$('.popout').hover(function()
    {
        $(this).stop().animate
        ({
            left:"-=92px"},150);
        });
    }, 
    function(){
        $(this).stop().animate
        ({
            left:"45px"},150);
        });
});

Здесь я бы оживил один всплывающий элемент divРазместите их в соответствии с макетом.Вы могли бы, конечно, по-прежнему оживлять их по отдельности, если бы вы этого хотели?: P

РЕДАКТИРОВАТЬ Тогда вы просто делаете (не забывайте, что класс popout должен быть достаточно широким для их анимации внутри): 

$('.popout').hover(function()
    {
        $('#side_menu_list').stop().animate({
                left:"-=130px"
                },150);

        $('#side_menu').stop().animate({
                left:"-=92px"
                },150);
    }, 
    function(){
        $('#side_menu_list').stop().delay(400).animate({
                left:"125px"
                },150);

        $('#side_menu').stop().animate({
                left:"45px"
                },150);
});
...