CSS-высота перехода div на рост детей

Question

Я пытаюсь скопировать меню в этом примере: (щелкните элемент меню настроек в элементах управления видеопроигрывателем)

https://plyr.io/

Я сделал быструю и грубую демонстрациюно я не могу заставить работать переход, я не хотел бы включать JavaScript, если это возможно.

settings_home меню должно быть видно при запуске, другое меню будет скрыто и должно увеличивать ширину и высоту.

var settings_home = $('.settings-home'),
playback_rate = $('.playback-rate-menu-holder')

settings_home.on('click',function(){
	settings_home.hide();
  playback_rate.show();
  
})

$('.sh-menu').on('click',function(){
	settings_home.show();
  playback_rate.hide();
  
})

.settings-holder {
  position: absolute;
  left: 0;
  bottom: 0;
}
.settings-home ul{
  margin:0;
  padding:0;
}

.settings-holder-inner {
  background-color: #ddd;
}

.settings-holder-inner {
  overflow: hidden;
  transition: height 1s cubic-bezier(.4, 0, .2, 1), width 1s cubic-bezier(.4, 0, .2, 1);
}

.menu-item {
 
  position: relative;
  white-space: nowrap;
  height: auto;
  text-align: center;
  list-style-type: none;
  text-transform: capitalize;
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: #eee;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.settings-menu-item-value {
  margin-left: 30px;
}

.menu-header {
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: #555;
  background: #f2f2f2;
  padding: 9px 10px 9px 15px;

  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.menu-header span {
  padding-left: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.settings-menu .menu-item {
  padding-left: 15px;
}


.settings-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="settings-holder">
    <div class="settings-holder-inner">
      <div class="settings-home" >
        <ul>
          <li class="menu-item" data-target="playback-rate-menu"><span class="settings-menu-item-title">Speed</span><span class="settings-menu-item-value"></span></li>

        </ul>
      </div>

      <div class="playback-rate-menu-holder settings-menu">
        <div class="menu-header sh-menu">
          <span>Speed Header</span>
        </div>
        <ul class="menu-holder">
          <li class="menu-item" data-value="2">2.0x</li>
          <li class="menu-item" data-value="1.5">1.5x</li>
          <li class="menu-item" data-value="1.25">1.25x</li>
          <li class="menu-item" data-value="1">Normal</li>
          <li class="menu-item" data-value="0.5">0.5x</li>
          <li class="menu-item" data-value="0.25">0.25x</li>
        </ul>
      </div>

    </div>
  </div>

Answer 1

Таким образом, вы не сможете напрямую имитировать предоставленный пример только с помощью CSS, поскольку их пример в основном удаляет скрытый атрибут, устанавливает непрозрачность равной 0,5 и устанавливает элемент на 10px ниже, чем там, где он заканчивается, затем применяет анимацию:

@keyframes plyr-popup {
    0% {
        opacity: .5;
        transform:translateY(10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

При этом я собрал пример, основанный на вашем, который использует переходы вместо анимации и max-height: 0; вместо display: none;, но включает только одну кнопку.

.settings-holder {
  position: absolute;
  left: 0;
  bottom: 0;
}
.settings-home ul {
  margin:0;
  padding:0;
}

.settings-holder-inner {
  background-color: #ddd;
}

.settings-holder-inner {
  overflow: hidden;
  transition: height 1s cubic-bezier(.4, 0, .2, 1), width 1s cubic-bezier(.4, 0, .2, 1);
}

.menu-item {
 
  position: relative;
  white-space: nowrap;
  height: auto;
  text-align: center;
  list-style-type: none;
  text-transform: capitalize;
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: black; /* adjusted for editing purposes */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.settings-menu-item-value {
  margin-left: 30px;
}

.menu-header {
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: #555;
  background: #f2f2f2;
  padding: 9px 10px 9px 15px;

  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.menu-header span {
  padding-left: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.settings-menu .menu-item {
  padding-left: 15px;
}

/* New content */
.playback-rate-menu-holder {
  transition: max-height 0.3s cubic-bezier(.4, 0, .2, 1);
}

.toggle-button + input[type="checkbox"] {
  display: none;
}
.toggle-button + input[type="checkbox"] ~ .playback-rate-menu-holder {
  max-height: 0;
  overflow-y: hidden;
}
.toggle-button + input[type="checkbox"]:checked ~ .playback-rate-menu-holder {
  max-height: 1000px;
}

<div class="settings-holder">
    <div class="settings-holder-inner">
      <label class="toggle-button menu-header sh-menu" for="toggle-height">Speed Header</label>
      <input type="checkbox" id="toggle-height"/>
      
      <div class="playback-rate-menu-holder">
        <ul class="menu-holder">
          <li class="menu-item" data-value="2">2.0x</li>
          <li class="menu-item" data-value="1.5">1.5x</li>
          <li class="menu-item" data-value="1.25">1.25x</li>
          <li class="menu-item" data-value="1">Normal</li>
          <li class="menu-item" data-value="0.5">0.5x</li>
          <li class="menu-item" data-value="0.25">0.25x</li>
        </ul>
      </div>
    </div>
  </div>

Вот кодекс для этого примера, если вы предпочитаете.

Насколько я знаю, это невозможнопереключать меню с помощью двух отдельных кнопок, используя только CSS, поскольку в конечном итоге вам потребуется селектор, чтобы вернуться назад к предыдущему брату / родителю.Если у кого-то есть стратегия для этого, пожалуйста, прокомментируйте или добавьте свой собственный ответ.

---

Редактировать : удален ненужный селектор из CSS.