通过偏移定位绝对元素答案

【问题标题】：Positioning absolute element by offset通过偏移定位绝对元素
【发布时间】：2013-01-28 15:31:56
【问题描述】：

我在页面上有一个下拉菜单，并希望菜单从左侧的主要项目下拉。它现在下降到右侧。

我在这里有一个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>

【问题讨论】：

标签： javascript jquery-ui drop-down-menu css-position jquery-hover

【解决方案1】：

原来我需要做的就是从 jQuery 偏移值中获取当前绘制的位置。然后设置绝对元素的 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');
});

【讨论】：

【解决方案2】：

简单。只要给这个：

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

小提琴：http://jsfiddle.net/praveenscience/T8hFW/1/

【讨论】：

我想我的问题措辞有误。菜单链接实际上位于页面中间的某个位置，嵌套在其他几个按钮之间。我不希望它总是在右边，但要成为与父母“相对”的左手下拉菜单......对不起。