CSS 菜单子导航显示在折叠下方答案

【问题标题】：CSS Menu Subnav Displays Below FoldCSS 菜单子导航显示在折叠下方
【发布时间】：2014-10-16 15:04:07
【问题描述】：

我有一个左侧的垂直 CSS 菜单，其中的子导航弹出到右侧。

我的问题是最后一个菜单项有许多子导航，导致它们显示在窗口的折叠下方。

有没有办法使用 CSS 或 jQuery 来检测是否会发生这种情况并相应地调整位置以便可以看到所有子菜单项？

这是我的示例的链接（您可能需要调整窗口高度）：

<!--demo is at following link-->

http://jsfiddle.net/otcq2ne0/

【问题讨论】：

您应该考虑窗口中可用的高度，以及显示子菜单所需的高度。如果不合适，您需要重新定位子菜单以使其可见。
这篇文章可能对你有所帮助：stackoverflow.com/questions/9872128/…

标签： jquery css menubar

【解决方案1】：

这是使用 jQuery 的更新：http://jsfiddle.net/otcq2ne0/1/

$('body').on('mouseenter mouseover', '.vmdrop', function() {
    var subNav = $('.vmenu-dropdown', this);

    if (subNav.length) {
        var pos = subNav[0].getBoundingClientRect();
        if (pos.bottom > window.innerHeight) {
            var threshold = pos.top;
            var buffer = 10;
            var diff = window.innerHeight - (pos.bottom + buffer);

            if (Math.abs(diff) > threshold) {
                diff = '-' + (threshold + buffer);
            }

            if (Math.abs(diff) > 0) {
                subNav.css({ top: diff + 'px' });
            }
        }
    }
});

【讨论】：

太棒了！像魅力一样工作。