如何让我的菜单下拉方向在视口边缘发生变化？

Question

我希望第一个元素向下扩展并且第一个元素的所有子元素都向右扩展。我做了什么：

$(document).ready(function() {
  $('.information_menu_root_ul').menu({
    position: {
      my: 'left top',
      at: 'left bottom+2'
    }
  });
});

.information_menu_item {
  width: 300px;
  }
  
.information_menu_root_ul .ui-menu .ui-menu {
  left: 100% !important;
  top: 0px !important;
  box-sizing: border-box;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="information_menu_item">Header(for hover)
  <ul class="information_menu_root_ul">
    <li>
      <div class="information_menu_item">Item 1</div>
        <ul>
          <li>
            <div class="information_menu_item">Item 2</div>
              <ul>
                <li>
                  <div class="information_menu_item">Item 3</div>
                  <ul>
                    <li>
                      <div class="information_menu_item">Item 4</div>
                    </li>
                  </ul>
                </li>
              </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

除一件事外，它工作正常。当右边界到达时没有默认翻转发生。这是因为 left/top 覆盖，我明白了。但可能有一些我没有看到的菜单技巧或参数？

默认行为，比较：

$(document).ready(function() {
  $('.information_menu_root_ul').menu();
});

.information_menu_item {
  width: 200px;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="information_menu_item">Header(for hover)
  <ul class="information_menu_root_ul">
    <li>
      <div class="information_menu_item">Item 1</div>
        <ul>
          <li>
            <div class="information_menu_item">Item 2</div>
              <ul>
                <li>
                  <div class="information_menu_item">Item 3</div>
                  <ul>
                    <li>
                      <div class="information_menu_item">Item 4</div>
                    </li>
                  </ul>
                </li>
              </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

期望的效果应该是这样的：

Answer 1

请查看此示例。

$(function() {
  $('.information_menu_root_ul').menu({
    position: {
      my: 'right top',
      at: 'left bottom+2'
    }
  });
});

.ui-menu {
  width: 300px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="information_menu_item_wrapper">Header(for hover)
  <ul class="information_menu_root_ul">
    <li>
      <div class="information_menu_item">Item 1</div>
      <ul>
        <li>
          <div class="information_menu_item">Item 2</div>
          <ul>
            <li>
              <div class="information_menu_item">Item 3</div>
              <ul>
                <li>
                  <div class="information_menu_item">Item 4</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

flip 似乎工作正常，“项目 3”出现在屏幕上的“项目 2”下方，翻转到另一侧。

我不确定你为什么有额外的 CSS，所以我在没有它的情况下进行了测试。如果这不是您想要的，请说明您要达到的目标。视觉示例也可能有所帮助。

更新

您可能需要嵌套菜单。

$(function() {
  $("#menu-top").menu().mouseover(function() {
    $("#menu-drop").show();
  });
  $("#menu-drop").menu({
    position: {
      my: "left top",
      at: "left bottom+2"
    },
    select: function() {
      $(this).hide();
    }
  }).position({
    my: "left top",
    at: "right top",
    of: $("#menu-top")
  }).hide();
});

.ui-menu {
  width: 300px;
}

#menu-top.ui-menu .hidden {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<ul id="menu-top">
  <li class="top-item">
    <div>Item 1</div>
    <ul class="hidden">
    </ul>
  </li>
</ul>
<ul id="menu-drop">
  <li>
    <div>Item 2</div>
    <ul>
      <li>
        <div>Item 3</div>
        <ul>
          <li>
            <div>Item 4</div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

相同Fiddle：https://jsfiddle.net/Twisty/xsdr1La3/46/

这将创建一个定位为子菜单的伪菜单。我发现了这个：How to make jQuery UI nav menu horizontal? 这很有帮助。

看了你的图片，我不确定我是否击中了你想要的东西。

Answer 2

我已经设法做到了我想要的，花费比想象的要少）不触及所有的想法 children 让菜单自己处理它，而是首先纠正 child 行为.

$(document).ready(function() {
  $('.information_menu_root_ul').menu();
  $('.information_menu_root_ul > li > .ui-menu').addClass('information_menu_first_child');
});

.information_menu_root_ul {
    display: none;
    position: relative;
    background-color: #c7e6b3 !important;
    }

.information_menu_item {
  width: 300px;
  }
  
.information_menu_first_child {
  position: absolute;
  top: 101% !important;
  left: 0px !important;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="information_menu_item">Header(for hover)
  <ul class="information_menu_root_ul">
    <li>
      <div class="information_menu_item">Item 1</div>
        <ul>
          <li>
            <div class="information_menu_item">Item 2</div>
              <ul>
                <li>
                  <div class="information_menu_item">Item 3</div>
                  <ul>
                    <li>
                      <div class="information_menu_item">Item 4</div>
                    </li>
                  </ul>
                </li>
              </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

和“information_menu_first_child”class“左和上”属性允许您根据需要微调位置。

如何让我的菜单下拉方向在视口边缘发生变化？

How can I get my menu dropdown direction to change at the edge of the viewport?

css

jquery-ui