具有自适应宽度的子菜单答案

【问题标题】：submenu with adapting width具有自适应宽度的子菜单
【发布时间】：2016-08-07 14:17:07
【问题描述】：

我有一个包含很多子级别的下拉菜单。我做了一个简单的 4 个级别的例子。因为菜单在侧边栏中应该也方便较小的移动设备，我想限制总宽度。

有没有可能让不活动的层级的宽度自动缩小，使整个菜单的总宽度不超过220px？所以当我用鼠标移动到第 3 层时，第 1 层和第 2 层的宽度会自动变窄。

我的代码是（在头部带有 jquery-links）：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script>
      $( function() {
        $( "#menu" ).menu();
      } );
    </script>
    <style>
      .ui-menu { width: 100px; font-size:12px; }
    </style>
  </head>
  <body>
    <ul id="menu">
      <li><div>no 1</div>
        <ul>
          <li><div>no 2</div>
            <ul>
              <li><div>no 3</div>
                <ul>
                  <li><div>no 4</div></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

【问题讨论】：

谢谢，很好的解决方案！

标签： jquery html css jquery-ui jquery-ui-menu

【解决方案1】：

您可以使用media query。比如：

@media screen and (max-width:220px) {
  .ui-menu {
    width:50px;  
  }
  
  .ui-menu .ui-menu .ui-menu {
    width:100px;
  }
}

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script>
      $( function() {
        $( "#menu" ).menu();
      } );
    </script>
    <style>
      .ui-menu { width: 100px; font-size:12px; }
    </style>
  </head>
  <body>
    <ul id="menu">
      <li><div>no 1</div>
        <ul>
          <li><div>no 2</div>
            <ul>
              <li><div>no 3</div>
                <ul>
                  <li><div>no 4</div></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

http://jsbin.com/gofolub/edit?html,css,js

【讨论】：

谢谢莫什。我有一个类似的解决方案，但是当菜单末尾有数千个链接时就会出现问题。变成大剧本，放慢速度。 sql 速度超快，即使有数千个链接。我现在可以使用它了，非常完美。