3

任意の数のアイテムを含めることができる水平ナビゲーションバーがあるとします。ここで、このページの幅が1000ピクセルで、表示された場合のすべてのアイテムが1300ピクセルになるとします。今、私がやりたいのは、1000pxを超えて拡張する原因となっている要素をすべて取得し、それらをドロップダウンメニューに配置することです。私が抱えている問題は、ウィンドウ幅を変更できるときにすべてがウィンドウに収まるようにするために必要な要素の数を把握するための最良の方法です（ユーザーがウィンドウ幅を変更した場合、要素の数ドロップダウンで増加または減少します）そしてナビゲーション要素の幅はランダムですか？

グーグルプラスのサイドナビゲーションに似たもので、垂直ではなく水平です。

4

2 に答える 2

0

オーバーフローが非表示に設定されている親divにナビゲーション要素を配置して、余分なナビゲーション要素が非表示になるようにします。
次に、jqueryを使用して非表示になっているアイテムを見つけ、ドロップダウンメニューに追加します。この質問への回答を参照してください：jQuery：オーバーフローでコンテンツが表示されないようにする方法：非表示？

私の作業例を参照してください：http：//jsfiddle.net/zSXTb。基礎：

var h = $("#container").height();
$("#container").find("div").each(function() {
    if ($(this).position().top > h) {
        $(this).clone().appendTo($("#extrasContent"));
    }
});

このonloadを実行し、ウィンドウのサイズが変更されたときに実行します。

于 2012-12-17T21:55:14.420 に答える
0

CSS で @media クエリを使用してみてください。画面サイズに関して多くの制御が可能です。例えば：

@media all and (max-width: 1000px){
    /*insert normal css. e.g.:*/
    body{
        width: 700px;
    }
}

max- widthの代わりにmin-widthを使用できます。

于 2013-01-21T12:31:14.867 に答える