检测下拉导航是否会离开屏幕并重新定位

Question

我有你典型的下拉导航,我正在努力确保下拉菜单链接始终可访问和可见:

<li><a href="#">Link 1</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</li>
<li><a href="#">Link 2</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</li>
<!-- etc. -->
</ul>

CSS真的没有什么特别的(颜色和背景被删除):

.dropdown,
.dropdown li,
.dropdown ul {
    list-style:none;
    margin:0;
    padding:0;
}
.dropdown {
    position:relative;
    z-index:10000;
    float:left;
    width:100%;
}
.dropdown ul {
    position:absolute;
    top:100%;
    visibility:hidden;
    display:none;
    width:16em;
}
.dropdown ul ul {
    top:0;
    left:100%;
}
.dropdown li {
    position:relative;
    float:left;
}
.dropdown li:hover{
    z-index:910;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
    visibility:visible;
    display:block;
}
.dropdown a {
    display:block;
    padding:1em 2em;
}
.dropdown ul li {
    width:100%;
}

存在未知数量的顶级链接(它们由用户创建).我遇到的问题是,如果顶级链接太远,有时下拉菜单(向右移动)将离开屏幕.我添加了一点CSS来补偿:

.dropdown > li:last-child ul { /* ...or use a class on the last link for IE */
    right:0;
}

现在最后一个转到左边而不是屏幕外,这很好,但是有一些问题:

1. 我并不总是需要这些样式用于最后一个链接,因为它并不总是在屏幕的边缘(就像只有3个链接).
2. 调整浏览器窗口大小时,链接堆叠在一起(按设计).有时,序列中间的链接最终会出现在右边缘,并且它们的下拉列表会被切断.
3. 有时,"倒数第二个"链接的菜单也会超出边界.

调整此演示中的面板大小以查看我的意思(红色区域被视为"屏幕外") http://jsfiddle.net/G7qfq/

多年来我一直在努力解决这个烦人的常见问题,但从未找到过令人满意的解决方案.有没有办法检查下拉菜单是否会关闭屏幕,如果是这样,添加/删除一个class名称或东西,以便我可以用CSS保持它在屏幕上？

一个线索我可能会使用的是,如果一个菜单不熄灭屏幕,它总是产生在窗口底部的垂直滚动条,但我不知道如何运用这些知识.我尝试了关于检测垂直滚动条的问题的接受答案,但由于某种原因它总是返回true,并且总是添加"边缘"类(可能是时间问题？):

$(".dropdown li").on('mouseenter mouseleave', function (e) {

    // Get the computed style of the body element
    var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

    // Check the overflow and overflowY properties for "auto" and "visible" values
    hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

    if (hasVScroll) {
        $(this).addClass('edge');
    } else {
        $(this).removeClass('edge');
    }
});?

使用javascript进行演示:http://jsfiddle.net/G7qfq/2/

真的,我不想看到一个垂直滚动条,即使是一瞬间,所以我不确定是否可行,加上可能存在误报(滚动条还有其他原因).

我也在这个答案中尝试了解决方案,我承认,我不太明白,也无法让它起作用:http://jsfiddle.net/G7qfq/3/

$(".dropdown li").on('mouseenter mouseleave', function (e) {

    var elm = $('ul:first', this);
    var off = elm .offset();
    var t = off.top;
    var l = off.left;
    var h = elm.height();
    var w = elm.width();
    var docH = $(window).height();
    var docW = $(window).width();

    var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW);

    if ( ! isEntirelyVisible ) {
        $(this).addClass('edge');
    } else {
        $(this).removeClass('edge');
    }
});?

我假设解决方案需要javascript,我正在使用jQuery,但我还没有弄清楚如何解决问题.有任何想法吗？

Answer 1

我想你差不多......

你应该只对宽度涉及的计算感兴趣.如果下拉元素的宽度和该元素的偏移量大于容器的宽度,则需要切换菜单.

$(function () {
    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('ul', this).length) {
            var elm = $('ul:first', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docH = $(".container").height();
            var docW = $(".container").width();

            var isEntirelyVisible = (l + w <= docW);

            if (!isEntirelyVisible) {
                $(this).addClass('edge');
            } else {
                $(this).removeClass('edge');
            }
        }
    });
});

http://jsfiddle.net/G7qfq/582/