html - 如果它会拉伸(stretch)页面，则更改子菜单的位置

Question

请参阅下面的代码段。我有一个包含几个菜单的页面。但是，当菜单位于页面右侧时，当您将鼠标悬停在它上面时出现的部分会拉伸(stretch)页面，并且您无法在不滚动页面的情况下看到元素，正如我在代码片段中模拟的那样。

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

谢谢!

#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

我看到了两种可能的方法。

当你的元素在左边时，它的位置是固定的吗？如果是，那意味着你知道它会在哪里。这意味着您可以假设视口(viewport)的最小宽度是什么，以便在悬停后查看它的内容。假设它固定在左边: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');
}