Как сделать плавный динамический выпадающий список?

326

26 апреля 2022, 07:40

Я хочу сделать плавный выпадающий список

Я сделал вот такой вариант

.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.

Answer 1

Может такой вариант подойдет:

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>