Question

请参阅下面的代码段。我有一个带有几个菜单的页面。但是，如果菜单位于页面的右侧，则当您将鼠标悬停在页面右侧时，显示的部分会拉伸页面，而您无法在不滚动页面的情况下看到这些项目，就像我在代码段中进行模拟一样。

如果右侧没有空间，有没有办法防止这种情况并让子菜单位于左侧？

谢谢！

#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>

Answer 1

我看到两种可能的方法。

当你的元素位于左侧时，它的位置是否固定？如果是，那意味着你知道它会在哪里。这意味着您可以假设视口的最小宽度是什么，以便在悬停后查看其内容。我们假设它固定在左边：800px，宽度为100px，子菜单也有100px宽度。简单的计算表明您需要至少1000px才能完全看到它。您可以使用@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');
}

更改子菜单的位置，如果它会拉伸页面

1 个答案: