jquery - CSS 菜单子(monad)导航显示在折叠下方

Question

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

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

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

这是我示例的链接(您可能需要调整窗口高度):

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

http://jsfiddle.net/otcq2ne0/

Answer 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' });
            }
        }
    }
});