8

メニューに次の構造があるとします。

<li class="parent-of-all"><a href="">Parent</a>
    <ul class="sub-menu level-0">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a>
            <ul class="sub-menu level-1">
                <li><a href="">Item 1.1</a></li>
                <li><a href="">Item 1.2</a></li>
                <li><a href="">Item 1.3</a>
                    <ul class="sub-menu level-2">
                        <li><a href="">Item 2.1</a></li>
                        <li><a href="">Item 2.2</a>
                            <ul class="sub-menu level-3">
                                <li><a href="">Item 3.1</a></li>
                                <li><a href="">Item 3.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

スタイルを設定すると、次のようになります (ネストされたサブメニューは であることに注意してくださいposition: absolute; left: 100%;)。

ここに画像の説明を入力

問題は、画面から押し出されるのを避けることができるかということです。Windows7 メニューが使用するソリューションを探しています (画面から消えることはありません)。簡単なJavascriptチェックはありますか？するだけでうまくいくと思いますleft: -100%;が、どのような条件でしょうか？アイデアが必要なだけで、それをJavascriptでコーディングできます:)

4

3 に答える 3

2

純粋なCSSソリューションを使用すると、サブメニューの位置をいつでも変更できます。最初のサブメニューがその親に右に表示されるように左に配置された場合、次の（3番目の）サブメニューは左側に配置される可能性があります。たぶん、:nth-child-selectorを使用してそうすることもできます。

その後、（CSSメディアクエリを使用して）n番目の子サブメニューから開始して左の位置を変更するだけで、より広い画面の例外を作成できます。

于 2012-10-29T12:09:13.570 に答える
2

私の知る限り、このチェックを CSS のみで行う方法はありません。JavaScript を使用する必要があります。最も簡単なアプローチは、mouseover/mouseout (jquery を使用する場合は hover) をアイテムにバインドし、要素 x-offset + width をウィンドウ幅と比較することです。

于 2012-10-29T10:38:13.640 に答える
0

いいえ、位置を計算するには JavaScript を使用する必要があります

于 2012-10-29T10:39:57.963 に答える