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 偏移值中获取当前绘制的位置。然后设置绝对元素的 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 回答