На чистом css сделать плавное открытие меню без привязки к высоте элемента

Question

Проблема в том что если задать height:0; transition 0.3s;, а потом задать height: 100%;, то не произойдет плавного открытия меню.

Answer 1

Решением будет воспользоваться контейнером для внутреннего меню. Этому контейнеру мы задаём overflow:hidden;, а у внутренних элементов margitn-top:-высота единичного элемента(с отрицательным значением);. Либо относительная величина в %. Чтобы меню реагировало на клик - используем невидимый checkbox и помещаем его над схлопывающимся меню, чтобы потом развернуть его, обратившись к нему через ~ (соседний элемент снизу)

.main-menu{
    list-style-type: none;
    padding: 0;
    position: relative;
    display: inline-block
}
.sub-menu{
    list-style-type: none;
    padding-left: 20px;
    overflow: hidden
}
input.hidden{
    position: absolute;
    height: 0;
    width: 0;
    visibility: hidden;
}
.sub-menu li{
    transition: 0.8s;
    /*margin-top:-31px;*/
}
.title{
    cursor: pointer;
    height: 30px;
    display: inline-block;
    padding: 0 40px 0 10px;
    border-bottom: solid 1px #555;
    display: flex;
    align-items: center;
    font-family: Arial;
    position: relative;
}
.hidden ~ .title::after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: solid 2px #777;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    right: 3px;
    margin-top: -10px;
}
.sub-title{
    height: 30px;
    display: inline-block;
    padding: 0 40px 0 10px;
    border-top: solid 1px #555;
    display: inline-flex;
    align-items: center;
    font-family: Arial;
    position: relative;
    background-color: white;
    width: 100%;
}
.sub-menu li:first-child>.sub-title{
    border-top:none;
}
.hidden:checked ~ .title::after{
    transform: rotate(225deg);
    top: 22px;
}
.hidden:checked ~ .sub-menu>li{
    margin-top:0%;
}
.hidden:not(:checked) ~ .sub-menu li{
    margin-top:-31px!important;
}

<ul class="main-menu">
  <li>
    <input class="hidden" type="checkbox" id="switcher-1">
    <label for="switcher-1" class="title">Menu</label>
    <ul class="sub-menu">
      <li>
        <input class="hidden" type="checkbox" id="switcher-11">
        <label for="switcher-11" class="title">Menu</label>
        <ul class="sub-menu">
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
        </ul>
      </li>
      <li>
        <input class="hidden" type="checkbox" id="switcher-12">
        <label for="switcher-12" class="title">Menu</label>
        <ul class="sub-menu">
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
          <li>
            <div class="sub-title">SubMenu</div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input class="hidden" type="checkbox" id="switcher-2">
    <label for="switcher-2" class="title">Menu</label>
    <ul class="sub-menu">
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
    </ul>
  </li>
  <li>
    <input class="hidden" type="checkbox" id="switcher-3">
    <label for="switcher-3" class="title">Menu</label>
    <ul class="sub-menu">
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
    </ul>
  </li>
  <li>
    <input class="hidden" type="checkbox" id="switcher-4">
    <label for="switcher-4" class="title">Menu</label>
    <ul class="sub-menu">
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
    </ul>
  </li>
  <li>
    <input class="hidden" type="checkbox" id="switcher-5">
    <label for="switcher-5" class="title">Menu</label>
    <ul class="sub-menu">
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
      <li>
        <div class="sub-title">SubMenu</div>
      </li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

На чистом css сделать плавное открытие меню без привязки к высоте элемента

Ответы (1 шт):