请参见下面的代码段。我有一个带有几个菜单的页面。但是,当菜单位于页面的右侧时,将鼠标悬停在该菜单上时出现的部分会拉伸页面,并且如我在代码段中模拟的那样,如果不滚动页面就无法看到项目。

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

谢谢!



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

10-16 14:43
查看更多