1

ページにドロップダウン メニューがあり、メニューをメイン アイテムから左にドロップダウンさせたい。現在、右に下がっています。

ここにjsfiddleがあります。

ご覧のとおり、現在は右にドロップダウンし、ページが収まるようにサイズ変更されています。メニューを左にドロップして、すべての寸法をそのまま維持したい. 簡単な方法はありますか？jQuery メニュー ウィジェットでできることは知っていますが、他にも問題がありました。

ボタンはページの真ん中のどこかにあるので、理想的には、右側に固定されているjsfiddleが示すように、ドロップダウンを親に対して相対的にドロップダウンしたい. これが明確になることを願っています。

コード：

準備完了

    $(document).ready(function () {
    // Menus
    $('ul.menu').hide();

    $('ul#viewMenu li').hover(function () {
        $(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
    }, function () {
        $(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
    });
    });

CSS

    ul#viewMenu   { overflow: hidden; }

    ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
    ul#viewMenu li a { line-height: 40px; }

    ul#viewMenu ul.menu { position: absolute; }
    ul#viewMenu ul.menu li { float: none; }

HTML

    <div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
    <li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
        title="Change the things.">
                <span>
                    <img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
                </span>
            </a>

        <ul class="view-menu-item view-menu-bottom-right menu"
        style="width: 170px !important">
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing1-calendar-button"></span>
                        <span>This 1</span>
                    </a>

            </li>
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing2-calendar-button"></span>
                        <span>This 2</span>
                    </a>

            </li>
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing3-calendar-button"></span>
                        <span>This 3</span>
                    </a>

            </li>
        </ul>
    </li>
</ul>

4

2 に答える 2

1

jQuery オフセット値から現在の描画位置を取得するだけで済みました。次に、absolute 要素の CSS 位置を設定します。シンプル...あなたが方法を知っているとき！ 

var position = $('ul#viewMenu ul.menu').offset();

$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });

$('ul.menu').hide();

$('ul#viewMenu li').hover(function () {
    $(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
    $(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
于 2013-01-28T16:50:47.740 に答える
0

単純。これを与えるだけです：

ul#viewMenu ul.menu {
    position: absolute;
    right: 0;
}

フィドル: http://jsfiddle.net/praveenscience/T8hFW/1/

于 2013-01-28T15:35:14.567 に答える