0

ページの上部に標準の水平ナビゲーション メニューがあります。レスポンシブにするために、908px 未満の画面サイズでレイアウトを垂直に変更し、JQuery のトグル機能を使用して、小さな画面で小さな「メニュー」ボタンを押して水平メニューを表示/非表示にしました。トグルを閉じたときにブラウザウィンドウのサイズを手動で変更する場合を除いて、どこでもうまく機能し、ナビゲーションは水平に変わりますが、非表示にはなりません。メニュー バーは に設定されたままdisplay:noneです。

ウェブサイトはwww.clampdesign.com/dev/jsdd です。

これは私が使用しているjQueryコードです:

    jQuery('a.btn-navbar').click(function() {
    jQuery('.nav-collapse').toggle('slow', function() { 
        });
    });
4

2 に答える 2

0

トグルしないナビゲーション バーを操作する場合は、高さとoverflow: hiddenを操作する必要があるため、トグル アニメーションの最後に display:none を使用して非表示にしない高さでアニメーションを実行する必要があります。

あなたのページに表示される別の問題は、ナビゲーションのフロートを防ぐために、subnavがどこにあり、の最後にが必要であるsearchということですsocial media<div class="clear"></div>header-inner

更新:ライブの例

于 2013-09-13T17:20:59.643 に答える
0

jQuery のサイズ変更機能を使用して、ウィンドウが 980px より大きいか小さいかを確認し、ナビゲーションの表示をそのように変更することで、これを機能させることができました。私のテストでは、これはうまくいくように見えますが、これが最善の方法であるかどうかはわかりません。別の方法を聞いたり、私がこれを行っている方法に問題がある場合は喜んでお聞きします. 以下は、コードに加えた変更です。

    // Toggle "Menu" link to open/close navigation on smaller screens
jQuery('a.btn-navbar').click(function() {
jQuery('.nav-collapse').slideToggle('slow', function() {
    });
}); 

// Check the size of the window, and adjust the visibility of the vertical menu accordingly.
jQuery(window).resize(function() {
    var viewportWidth = jQuery(window).width();
    if (viewportWidth > 980) {
        jQuery('.nav-collapse').show();
    };
    if (viewportWidth < 980) {
        jQuery('.nav-collapse').hide();
    };
});
于 2013-09-13T18:25:16.873 に答える