Question

我在CSS3中创建了一个3级下拉菜单，其中子菜单垂直下拉。一切都很好，唯一的问题是当菜单（.main-menu > li - >看到下面的代码）太靠近屏幕的右侧时，其子菜单的某些部分会因为“滑出”而消失屏幕，它变得不可见。

我想通过更改当前子菜单的浮动方向来改进菜单，如果它太靠近屏幕的一侧。因为我是jQuery的新手，你能帮助我一点吗？

HTML的主要结构是：

<nav>
  <ul class="main-menu">
    <li><a href="#">Menu Point 1</a>
      <ul>
        <li><a href="#">Menu Point 1.1</a>
          <ul> 
            <li><a href="#">Menu Point 1.1.1</a></li>
            <li><a href="#">Menu Point 1.1.2</a></li>
            ....
          </ul>
        </li>
        <li><a href="#">Menu Point 1.2</a></li>
        ....
      </ul>
    </li>
    <li><a href="#">Menu Point 2</a>
      <ul>
        <li><a href="#">Menu Point 2.1</a>
          <ul>
            <li><a href="#">Menu Point 2.1.1</a></li>
            <li><a href="#">Menu Point 2.1.2</a></li>
            ....
          </ul>
        </li>
        <li><a href="#">Menu Point 2.2</a></li>
        ....
      </ul>
    </li>
    .....
  </ul>
</nav>

据我所知，jQuery应该做这些事情：

测量第1级子菜单+第2级子菜单（x）的宽度
测量.main-menu > li左侧位置与屏幕右侧位置之间的距离（y）
if (y-x)<0 { float the submenus to the left (by default they float to the right); }

您有什么建议我应该如何开始？

Answer 1

所以，我自己来找解决方案，如果有人有兴趣，这里是代码：

$(".main-menu > li > ul > li").addClass("submenu-1");
$(".main-menu > li > ul > li > ul > li").addClass("submenu-2");

$(".main-menu > li").on("mouseover", function() {

    if($(this).find(".submenu-1").length > 0 ) {
      var clientWidth = document.body.clientWidth;
      var menuDist1 = $(this).find(".submenu-1").offset().left;
      var menuWidth = $(this).width();
      var menuWidth1 = $(this).find(".submenu-1").width();
      var menuWidth2 = $(this).find(".submenu-2").width();

      var menuPosition = menuDist1 + menuWidth1 + menuWidth2;

      if (menuPosition > clientWidth) {
        var newPosition1 = menuWidth - menuWidth1;
        var newPosition2 = -menuWidth1;

        $(this).find(".submenu-1").parent("ul").css("left", newPosition1);
        $(this).find(".submenu-2").parent("ul").css("left", newPosition2);
      }
   }    
});

当jQuery滑出屏幕时，用jQuery改变子菜单的位置

1 个答案: