我已经有了典型的下拉导航,并且我正在尝试确保下拉菜单链接始终可访问且可见:
<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;
}
现在最后一个转到左侧而不是离开屏幕,这很好,但有一些问题:
- 我并不总是需要最后一个链接的这些样式,因为它并不总是位于屏幕边缘(就像只有 3 个链接一样)。
- 当浏览器窗口大小调整时,链接会堆叠在一起(按照设计)。有时,序列中间的链接最终会出现在右边缘,并且它们的下拉菜单会被切断。
- 有时“倒数第二个”链接的菜单也会超出边界。
调整此演示中的面板大小以了解我的意思(红色区域被认为是“屏幕外”) http://jsfiddle.net/G7qfq/ http://jsfiddle.net/G7qfq/
我多年来一直在与这个令人烦恼的常见问题作斗争,但从未找到令人满意的解决方案。有什么方法可以检查下拉菜单是否会离开屏幕,如果是,请添加/删除class
名称或其他内容,以便我可以使用 CSS 将其保留在屏幕上?
我可能使用的一个线索是,如果菜单does离开屏幕,它总是在窗口底部产生一个垂直滚动条,但我不确定如何使用这些知识。我尝试了接受的答案这个问题 https://stackoverflow.com/questions/2146874/detect-if-a-page-has-a-vertical-scrollbar关于检测垂直滚动条,但由于某种原因它总是返回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/2/
真的,我不想看到垂直滚动条,即使是一瞬间,所以我不确定这就是正确的方法,而且可能存在误报(由于某些其他原因而出现滚动条)。
我也尝试过解决方案这个答案 https://stackoverflow.com/a/1725550/398242我承认,我不太明白,并且无法让它发挥作用:http://jsfiddle.net/G7qfq/3/ 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,但我不知道如何解决该问题。有任何想法吗?