0

私が作成したメニューを表示するフィドルがあります。

縦型メニューです。私が抱えている問題は<li>、メニューに追加するほど、画面に収まりにくくなることです。

例: トップ メニュー項目 ( A ) には、画面の上に広がるほとんどのコンテンツがあります。メニューに多くの項目 (a、b、c、d ...z) があり、一番下のメニュー項目 ( z ) が画面の下部を超えて拡張されると想像してください。

私の問題を複雑にするために、メニューの中央にあるメニュー項目に多くの要素があると想像してください。これは、画面の上部を超えて拡張されます。これは私が望むものではありません。実際には、メニュー フライアウトが周囲のウィンドウに応答し、内部に収まるようにしたいと考えています。

次のように表示される前に、各グループに中央に配置するように指示することから始めました。

var groupList = $(e.target).find('.group-list');
groupList.css({
    'margin-top': (-groupList.height() / 2) + 'px'
});
groupList.show();

残念ながら、これでは十分ではありません。ただし、それぞれがその周りのウィンドウを認識し、ウィンドウ内に収まるほど応答するようにする方法がわかりません。

groupList.css({}) コードを書き直して、グループ リスト クラスをレスポンシブにし、ウィンドウ内に収まるようにするにはどうすればよいですか?

追記：長文で申し訳ありません。私が抱えていた設計上の問題を説明したかったので、皆さんが理解し、うまくいけば正しい方向に私を向けることができました.

4

1 に答える 1

2

私があなたの必要性を正しく理解しているなら、これがあなたの質問に答えてくれることを願っています.私はあなたのフルライトアイテム/メニューの周りにあるラッパーの合計の高さを取得します. 次に、次のようなものの変数と比較します。

Var height = $(document).height(); // ドキュメントの高さを取得 Var width = $( window).width();

//次に、常にリストの高さと比較します。高さが必要な制限のポイントに達した場合は、新しい列を作成してリストを追加します。そうすれば、常にサイズが変更され、ウィンドウのビューポートの外にぶら下がることはありません。

次に、ポップアウト リスト項目を入れる 2 番目のボックスを作成します。それをドキュメントの高さと比較し、下部の CSS を 0px に設定します。

これで問題が解決しない場合は、generic_brand@ymail.com までお気軽にメールしてください。私の説明の例を示すスニペットを作成します。コーディングをお楽しみください。幸運を祈ります!

于 2012-10-29T23:50:29.910 に答える