2

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

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

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

1 ответ 1

3

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.