请参见下面的代码段。我有一个带有几个菜单的页面。但是,当菜单位于页面的右侧时,将鼠标悬停在该菜单上时出现的部分会拉伸页面,并且如我在代码段中模拟的那样,如果不滚动页面就无法看到项目。
如果右侧没有空间,是否有办法防止这种情况并使子菜单位于左侧?
谢谢!
#body {width: 100px; padding-left: 150px; overflow: auto;}
ul {background-color: gray; width: 100px; margin 0px; padding: 0px; list-style: none;}
li {position: relative; padding: 5px;}
li ul {display: none; position: absolute; top: 0px; left: 100%;}
li:hover {background-color: wheat;}
li:hover ul {display: block;}
span::after {content: "►"; position: absolute; right: 5px;}
<div id="body">
<ul>
<li>
<span>Item 1</span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div>
最佳答案
我看到两种可能的方法。
当您的元素在左侧时,位置是否固定?如果是,那意味着您知道它将在哪里。这意味着您可以假设视口的最小宽度是多少,以将其悬停后才能看到其内容。
假设它固定在左侧:800px,宽度为100px,子菜单也为100px。简单的计算表明,至少需要1000像素才能完全看到它。您可以使用@media查询来优化较小屏幕的外观。伪代码:
.menu {
fixed on right;
}
@media screen and (max-width: 1000px) {
.menu {
somewhere else where it is visible;
}
}
另一方面,如果菜单不是固定的,但是随着页面其余内容的移动而移动,则必须使用javascript。 jQuery将简化您的问题-重点是检查菜单在悬停时是否可见。使用jQuery的.offset和.width()确定它。如果它不可见,则应用一些可改变其行为的类。
if ($(document).width() < $('#float-menu').offset().left + $('#float-menu').width() + $('#float-menu > ul').width()) {
$('#float-menu').addClass('alternative');
}
关于html - 更改子菜单的位置是否会拉伸(stretch)页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41667378/