0

これについて何か助けていただければ幸いです。ブラウザー ウィンドウのサイズに応じて非表示/表示状態を切り替えるレスポンシブ ドロップダウン メニューを作成しています。これは、オンラインで見つけた jQuery ソリューションに基づいています。

最小 (モバイル) バージョン。クリックイベントがトリガーされるとすぐにメニューがドロップダウンしますが、徐々に開くように「アニメーション」機能を追加したいと思います。

jQuery の経験があまりないので、誰かが自分のコードに「アニメーション」コマンドを追加できる場所を提案できることを願っています。

ありがとうございます。

========= Javascript は次のとおりです。

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 600) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    }
    else if (ww >= 600) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

================= そして、ここにHTMLがあります：

<nav class="main_navigation"> 

        <ul class="nav">
            <li><a href="item1.php"><span>Item1</span></a></li>
            <li><a href="item2.php"><span>Item2</span></a></li>
            <li><a href="item3.php"><span>Item3</span></a></li>
            <li><a href="item4.php"><span>Item4</span></a></li>
            <li><a href="item5.php"><span>Item5</span></a></li>
        </ul>

4

2 に答える 2

0

申し訳ありませんが、携帯電話で入力するスペースがあまりなかったと答えました。最近、同様のことを行うために使用したコードは次のとおりです。

<div id="mobile_menu">
<p id="mobile_menu_btn">Menu</p>
<ul id="mobile_menu_ul">
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="news.html">News</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="social.html">Social</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- mobile_menu -->

$("#mobile_menu_btn").click(function () {
        $("#mobile_menu_ul").slideToggle('slow', function() {
  menuDown = true});

});

それをコードに入れるという点では、次のように編集してみることができます。

if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").slideUp('slow');
        } else {
            $(".nav").slideDown('slow');
        }
于 2013-02-22T14:38:02.787 に答える
0

jquery を使用してレスポンシブ デザインを作成するのではなく、スケルトンなどの CSS 基盤の使用を検討しましたか?

http://www.getskeleton.com/

ページサイズに応じて、メディアクエリを使用してナビゲーションの css を変更することをお勧めします。jqueryに関しては、slideToggleを使用できます

于 2013-02-22T13:34:48.043 に答える