1

私は現在、水平ナビゲーション メニューを備えたレスポンシブ サイトに取り組んでおり、モバイル用に展開するクリック可能なメニュー アイコンに切り替えています。メニューはデスクトップの解像度できれいに見え、モバイルでもうまく機能します.

解像度のブレークポイントを超えてブラウザーを縮小すると、問題が発生します。モバイル メニュー アイコンに切り替わり、標準メニューが非表示になります。アイコンをクリックすると、メニューが表示されます。もう一度クリックすると消えます。すべて順調。ブラウザーを元のサイズに戻すと、モバイルのトグルを表示したままにしておくと、元のメニューが表示されます。最初にトグルをアクティブにしなかったが、アクティブにした場合は、モバイル メニューを閉じてから元のサイズに戻します。標準メニューはトグルを非表示にし、二度と表示されません。

私が知る限り、メディアクエリのブレークポイントを超えてスケ​​ールアップしたときに、トグルを強制的に表示に戻すにはjqueryが必要です。しかし、私はそれを行う方法がわかりません。オンラインの他の場所でこの問題を見つけていません。

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

私が使用していた機能です：

<nav id="nav-wrap">
        <div id="menu-icon"><img src="../img/menu.png"></div>
        <ul id="nav">
        <li><a href="default.htm">Home</a></li>
        <li><a href="obstacles.htm">Obstacles</a></li>
        <li><a href="location.htm">Location</a></li>
        <li><a href="register.htm">Register</a></li>
        <li><a href="sponsor.htm">Sponsor</a></li>
        <li><a href="volunteer.htm">Volunteer</a></li>
        <li><a href="faqs.htm">FAQs/Documents</a></li>
        </ul>
        </nav>

は私のナビゲーションメニューであり、

#nav {
    text-align:center;
    font-size:1em;
    text-transform:uppercase;
    font-weight:900;
    margin:1em auto;
    display:block;
}
#nav li {
    display:inline;
    text-align:center;
    margin:1em 2em;
}
#menu-icon {
    display:none;
}
@media screen and (max-width:600px) {
#menu-icon {
    width:30px;
    height:30px;
    cursor:pointer;
    display:block;
    margin:0em auto 1em auto;
}
#nav {
    clear:both;
    z-index:10000;
    padding:5px;
    background:#000;
    border:solid 1px #f1f1eb;
    display:none;
}
}

編集：追加するのを忘れていました。スケールダウンすると非表示になる別のIDを持つ別のナビゲーションを使用してこれを回避しようとしましたが、逆の問題があり、半分の時間でスケールアップして2つのナビゲーションメニューがあるため、jquery #ナビがオンになります

4

1 に答える 1

1

window.resize 関数を使用してビューポートを確認し、追加します$("#nav").show();

JS

$(window).resize(function() {
    //Add a set timeout to prevent resource hogging
    myWinWidth();
});

function myWinWidth() {
    var winWidth = $(window).width();
    console.log(winWidth);    
        if(winWidth > 600){
                 $("#nav").show();          
        }
    return false;
};

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

フィドル

http://jsfiddle.net/5DQs8/8/

于 2013-10-30T18:13:44.073 に答える