-2

私はDIVコンテナを持っています。そのコンテナには、会社のロゴとメニューがあり、左に1つ、右に1つ並んでいます。ウィンドウが広い場合、メニュー タイルのセットがあります。ウィンドウが特定のポイントを超えて縮小した場合、メニューはスタック/ドロップ メニューに変換する必要があります。

ウィンドウの幅が 960 ～ 1000 ピクセルの場合を除いて、すべてがうまく機能します。メニューがタイルからスタックにすぐに変更されず、タイルが他の場所にジャンプしてしまいます。言葉で説明するのは少し難しいです - ここ testbed.dirtydogweb.com.au#about に行き、ウィンドウのサイズを 980px に変更してください。

私はすべての CSS トリックを試しましたが、これは非常に簡単です。

私のなぞなぞを最初に解いた人にロリポップを贈ります。

4

2 に答える 2

0

これを試して：

JS ファイルjs/main.jsの 55 ～ 65 行目に、次のコードがあります。

    $(window).resize(function() {
        if( $(window).width() >= 960 ){
            if( ($("ul#menu li").css('display' ) == 'none') || ($("ul#menu li").css('display' ) == 'block') )
                $("ul#menu li").css('display','inline');
        }
        else{
            $("ul#menu li").css('display','none');
        }
    });

});

これは明らかに、メニューがインライン要素からブロック要素に変わるタイミングを制御しています。あなたのメニュー要素は明らかに 960px よりも大きいため、適切なポイントでドロップダウンになりません。

56 行目の960を1018に変更してみてください。

if( $(window).width() >= 1018 ){
于 2013-11-14T03:36:39.470 に答える
0

メディア クエリを変更して、css で変更したいディメンションの最小値と最大値を指定できます...

例

@media screen and (min-width: 500px) and (max-width: 800px)
于 2013-11-14T03:43:25.377 に答える