2012-03-05 4 views
0

Boostrap'sと同様の反応的なナビゲーションを作成しようとしていますが、問題があります。ここに私が今あるもの:http://jsfiddle.net/apautler/eqAZz/。この例では説明するのが難しいかもしれませんが、画面が小さくて大きくなるとナビゲーションが消えます。私は、jQueryが画面サイズが992px未満であるかどうかを確認しているという理由がわかります。そうであれば、ナビゲーションを非表示にします。ページを拡大すると、ナビゲーションはまだ表示されません。どういうわけか、ページがリサイズされるにつれてそれが再評価される必要があります。私は、jQueryのresize()funcitonがあると思いますが、うまくいかないようです。何か案は?対応ナビ

また、より良い方法を構築するには、最初からやり直すことができます。助けてくれてありがとう!

+0

あなたはウィンドウのサイズ変更イベントをトリガすることができるので、サイズが再び計算されます。 –

答えて

2

をCSS3 Media queriesを使用する方がはるかに簡単になります。

@media all and (max-width:500px) { 
    .navigation {display:none;} 
} 
+0

これは良い点です。私はスライドトグルのためにjQueryを使用しなければならなかったので、私はnavを隠すためにそれを使うべきだと考えていた。私はおそらく表示を使用することができます:なしメディアクエリで、右ですか? – Andrew

0

これを試してみてください:

http://jsfiddle.net/will/eqAZz/2/embedded/result/

私はあなたはそれが働いて得ることができなかった理由はわかりません。 JSフィドルでは、あなたはフルスクリーン版を見なければならないでしょう。

つまり、CSSを使用してメディアクエリを調べる必要があります。 http://www.w3.org/TR/css3-mediaqueries/

JavaScriptが必要です。

希望に役立ちます:)

0
$(window).resize(function(){ 
if ($(window).width() < 992) { 
$('#nav-primary').hide(); 
} 
else { 
$('#nav-primary').show(); 
} 
}); 

ここ

0

の作品の基本的なウィンドウが

$(window).resize(function(){ 
    var hideShow=($(window).width() < 992) ? 'hide' :'show'; 
    $('#nav')[hideShow](); 
}) 
0

ハンドラのサイズを変更しています。このチュートリアル、リンクをお試しください:http://hightechnology.in/how-to-create-responsive-menu-2/

デモは彼らであり、あなたはあまりにもコードをダウンロードすることができます。

関連する問題