0

CSSとjqueryを使って水平スライドアウトメニューを作ろうとしています。

問題: 1) CSS - オプション (この場合は「サービス」) にカーソルを合わせると、メニューの残りの部分が押し下げられます。これを乗り越える方法がわかりません。

2) アクティブなオプションでメニューを開いたままにするためにできることはありますか? つまり、ユーザーが「サービス 1」をクリックすると、メニューは開いたままになります (完全にスライドアウトします)。

私はこれをStackoverflowで見ましたが、私が説明しているのと同じ問題があるようです:

最後に、私の jsfiddle: http://jsfiddle.net/LJ4tH/13/

HTML:

    <nav>
    <ul id="menu-nav">
    <li><a href="#">About Us</a></li>
    <li class="has-flyout"><a href="#">Services</a>
    <ul class="flyout">
    <li class="active"><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>
    </ul>
    </li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Blog</a></li>
    </ul>
    </nav>

JQuery:

(function navslider($) {
    $('.flyout').hide();
    $('.has-flyout').on({
        mouseenter: function() {
            $(this).find('ul.flyout').stop().animate({width: 'toggle'},1000);
        },
        mouseleave: function(){
            $(this).find('ul.flyout').stop().animate({width: 'toggle'},3000);
        }
     });
})(jQuery);

CSS:

    nav li { display: inline-block; }
    /*li a:hover { margin-top:0px; }/*This doesn't seem to work*/
    .flyout { display: inline-block; white-space: nowrap; margin-top: 0px; }
    /*ul.flyout li.active { margin-top: 0px; }
    ul.flyout. li. a:hover { margin-top: 0px; }*/

ありがとう

ファブ

4

1 に答える 1

0

次のようなことを試すことができます：

(function navslider($) {
    $('.flyout').hide();
    $('.has-flyout').on({
        mouseenter: function () {
            if ($(this).hasClass("active")) return;

            $(this).find('ul.flyout').stop().animate({width: 'toggle'}, 500);
        },
        mouseleave: function () {
            if ($(this).hasClass("active")) return;

            $(this).find('ul.flyout').stop().delay(500).animate({width: 'toggle'}, 500);
        },
        click: function () {
            $(this).toggleClass('active');
        }
    });
})(jQuery);

http://jsfiddle.net/LJ4tH/20/

Dim3iが言ったように、ドキュメントの幅が十分でない場合を除いて、アイテムが押し下げられるという問題は見られません。

于 2013-02-05T20:25:34.243 に答える