主页 / 问题 / 1194363
Accepted
zeni1agent
Asked:2021-10-23 19:06:09 +0000 UTC2021-10-23 19:06:09 +0000 UTC

如何制作流畅的动态下拉列表？

  • 772

我想做一个平滑的下拉列表

我做了这个选项

.menu {
  padding: 0px;
  display: block;
}

.menu>li {
  margin: 0px;
  position: static;
}

.menu a {
  display: block;
  transition: 1s;
  color: blue;
}

.menu li {
  padding: 3px;
  max-height: 13px;
  overflow: hidden;
  background: #ff000059;
}

.menu ul {
  margin: 0px;
  padding: 0px;
  max-height: 0px;
  overflow: hidden;
  transition: 1s;
}

.menu li:hover {
  transition: 1s;
  max-height: 1000px;
}

.menu>li:hover {
  transition: 1s;
}

.menu li:hover ul {
  transition: 1s;
  max-height: 1000px;
}

.menu .test {
  padding: 10px;
  font-size: 30px;
}
<ul class="menu">
  <li><a href="#">position</a>
    <ul>
      <li><a href="#">top</a></li>
      <li><a href="#">left</a></li>
      <li><a href="#">down</a></li>
      <li><a href="#">right</a></li>
    </ul>
  </li>
  <li><a href="#">Object</a>
    <ul>
      <li class='test'><a href="#">Car</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
      <li><a href="#">Windows</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

但是，问题是我经常需要选择所需的max-height。如果块的高度不同，这尤其困难。

如何制作平滑的下拉列表？它会支持不同高度的块并在任何嵌套程度下工作。

最好是带有最少 JS 的简单版本。

javascript

1 个回答

  1. Best Answer

    也许这会起作用：

    ul:not(.menu) {
  overflow: hidden;
  max-height: 0;
  transition: 0.5s ease-out;
}

li:hover>ul {
  max-height:100vh;
  transition: 0.5s ease-in;
}
    <ul class="menu">
  <li><a href="#">position</a>
    <ul>
      <li><a href="#">top</a></li>
      <li><a href="#">left</a></li>
      <li><a href="#">down</a></li>
      <li><a href="#">right</a></li>
    </ul>
  </li>
  <li><a href="#">Object</a>
    <ul>
      <li class='test'><a href="#">Car</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
      <li><a href="#">Windows</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

    • 3

相关问题