0

ドロップダウンの機能は正常に動作しています。ただし、ドロップダウンしたアイテムの配置に問題があります。ドロップダウンされたアイテムを配置しましたが、これを大きな画面で表示すると、アイテムはまだ小さな画面にあるかのように配置されました。

http://jsfiddle.net/sArTd/1/

ドロップダウンは jsFiddle で正常に動作しますが、HTML セクションの「テスト」のコメントを外して再試行すると、私の問題が何であるかがわかります。ドロップダウンアイテムの親アイテムが左右に移動すると、ドロップダウンアイテムは追従しません!

ご覧のとおりleft:..、ドロップダウンしたアイテムを配置するために使用していたので、これが問題である可能性があり、正しく配置する方法がわかりません!

4

3 に答える 3

1

メニュー リンクとメニュー リストを ul list でラップします。（あなたの質問を理解するのに間違っていなければ）

HTML

<ul class="main">
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' id="Notification">Notifcations</a>
        <ul id="popOut1">
            <li><a href='#'>Dropped</a>
            </li>
        </ul> 
    </li>
    <li><a href='#' id="Settings">\/</a>
        <ul id="popOut2">
            <li><a href="#">Settings</a>
            </li>
            <li><a href="#">Logout</a>
            </li>
        </ul>
       </li>
</ul>

CSS

ul.main, li{
        list-style: none;
    margin: 0;
    padding: 0; display:inline-block;
    background:red;
    position:relative
}

デモ

于 2013-04-03T11:53:36.613 に答える
0

ウィンドウのサイズ変更などの UI の変更に動的に対応できるため、メニューを配置する最善の方法は jQuery を使用することです。

次のようなものをお勧めします。

$opener.on("click", function() {
    $menu.show();
    $menu.css({
        top: $opener.position().top + $opener.outerHeight() + 'px',
        left: $opener.position().left + 'px'
    });
});

次に、メニューはposition: absolute両方のコンテナでなければなりませんposition: relative。

于 2013-04-03T11:55:19.930 に答える