Развернуть / свернуть правое меню в чистом html / css

Question

Я пытаюсь достичь эффекта ниже

But I have the problem with input label - if I will create two divs, the checkbox effect is not working. And also have the problem with css grid to reverse that column.

Working on:

• before click we see only white column,
• after the click we see yellow column,
• we can switch it via clicking

Stackblitz with current version:

https://stackblitz.com/edit/js-vgaaxb

const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.filter-menu {
  border-radius: 0px 8px 8px 0px;
  background-color: #ffffff;
  border-color: #71bccd;
  box-shadow: 0 2px 8px 0 rgba(55, 58, 60, 0.2);
  font-size: 14px;
  min-width: 62px;
}

.filter-content {
  width: 0px;
  overflow: hidden;
}

input#menu {
  display: none;
}

label {
  padding-top: 10vh;
  writing-mode: tb-rl;
}

.filter-menu label {
  display: block;
  cursor: pointer;
}

input:checked~.filter-content {
  width: 425px;
}

<div id="app"></div>

<div class="filter-menu">
  <input type="checkbox" id="menu">
  <label for="menu">CLICK TO EXPAND</label>
  <div class="filter-content" style="background-color: #ffd813">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

Answer 1

Я использовал следующее, чтобы добиться желаемого эффекта:

.filter-menu {
  ...
  display: flex;
  flex-direction: row-reverse;
}

Это расположит элементы в обратном порядке, поместив желтый первым (слева)

input:checked~.filter-content {
  flex-grow: 1;
}

Это сделает желтый div заполняет остальную часть пространства, когда он виден

label {
  ...
  padding-right: 100px;
}

Я также добавил к метке правый отступ, чтобы поместить его посередине, как на картинке. Вы можете настроить этот 100px в соответствии с вашими потребностями. Обратите внимание на , что вы можете щелкнуть это пробел, чтобы переключить меню. Если вы этого не хотите, используйте вместо него margin-right: 100px;.

// Import stylesheets
//import './style.css';

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.filter-menu {
  border-radius: 0px 8px 8px 0px;
  background-color: #ffffff;
  border-color: #71bccd;
  box-shadow: 0 2px 8px 0 rgba(55, 58, 60, 0.2);
  font-size: 14px;
  min-width: 62px;
  display: flex;
  flex-direction: row-reverse;
}

.filter-content {
  width: 0px;
  overflow: hidden;
}

input#menu {
  display: none;
}

label {
  padding-top: 10vh;
  writing-mode: tb-rl;
  padding-right: 100px;
}

.filter-menu label {
  display: block;
  cursor: pointer;
}

input:checked~.filter-content {
  flex-grow: 1;
}

<div id="app"></div>

<div class="filter-menu">
  <input type="checkbox" id="menu">
  <label for="menu">CLICK TO EXPAND</label>
  <div class="filter-content" style="background-color: #ffd813">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>