0

http://jsfiddle.net/UXuvL/で表示できる基本的なナビゲーションメニューがあります。

HTML：

<nav>
    <ul>
        <li>ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li>PROJECTS</li>
        <li>CONTACT</li>
    </ul>
</nav>​

CSS：

nav li { display: inline-block }
.sub-menu { display: inline-block; white-space: nowrap }​

jQuery：

(function($) {
    $('.sub-menu').hide();

    $('nav li').on('hover', function(){        
        $('nav .sub-menu').animate({width: 'toggle'});
    });
})(jQuery);​

機能的には、これが私がそれを機能させたい方法です。「About」にカーソルを合わせると、「People」/「Approach」が右にスライドします。

今の私の最大の問題は、ポップアップした新しいリンクの1つにカーソルを合わせると、メニューが非表示になることです。どうすればこれを防ぐことができますか？

4

1 に答える 1

2

ここに行く男！mouseenterとmouseleaveを使用します。

フィドルを更新しました

HTML

<nav>
<ul>
    <li class='menu-header' >About
        <ul class="sub-menu">
            <li>People</li>
            <li>Approach</li>
        </ul>
    </li>

    <li class='menu-header' >Contact
        <ul class="sub-menu">
            <li>Email</li>
            <li>Phone</li>
        </ul>
    </li>

</ul>
</nav>

Jquery

(function($) {

    $('.sub-menu').hide();

    $('.menu-header').on({

        mouseenter: function() {
            $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
        },

        mouseleave: function(){
            $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
        }

     });


})(jQuery);
于 2012-12-06T19:10:07.583 に答える