0

「：hover」を使用してサブメニューを表示する標準のcss垂直ナビゲーションメニューを使用しています。メニューは、標準の「ul」および「li」要素を使用して作成されます。メニューはページの左側にあり、メニューにカーソルを合わせると、その右側にサブメニューが表示されます。

私の質問は、ポップアップするサブメニューですが、全画面の高さにする方法はありますか？

アップデート

これは非常に簡単なサンプルです：http： //jsfiddle.net/NuAWQ/1/

周囲のhtml/cssがすべて削除されたため、表示されるのはメニューだけです。

アップデート

私は今、jQueryを使用してこれを行うことができました。jQueryは次のとおりです。

$('ul > li > ul').css('height', $(window).height() + 'px');

http://jsfiddle.net/NuAWQ/2/

4

2 に答える 2

1

誰かが興味を持った場合は、いくつかの追加情報。

上記の解決策に加えて、jQueryを使用してサイズの問題全体を修正します:($('ul > li > ul').css('height', $(window).height() + 'px');デモ）、jQueryコードを拡張することにより、子メニュー項目をホバーされた親項目にさらに整列させることができます。

JSFiddleデモはこちらです。次のjQueryコードは、すでに述べた上記に追加されました。

$('ul > li > ul > li:first-child').css('margin-top', function(index, value) {
    var offset = $(this).parent().parent().offset();

    if (offset != null && offset.top > 0) {
        return offset.top + "px";
    } else {
        return 0 + "px";
    }
});

これが行うことのほとんどは、すべてのサブメニューを取得し、ホバーされた親メニュー項目の垂直オフセットと同じであるをmargin-top最初に追加することです。<li>上記のデモでは、これは最初のサブメニューでのみ機能しますが、CSSセレクターまたはオフセット取得ロジックを微調整することですべてのサブメニューに適用できると確信しています。

于 2012-08-29T16:29:36.457 に答える
0

これにより、意図した結果が得られました。

$（'ul> li> ul'）。css（'height'、$（window）.height（）+'px'）;

ただし、子要素を親要素に揃えたい場合は、Roddyの追加の回答も参照してください。

于 2012-08-30T08:10:19.190 に答える