在纯 html/css 中展开/折叠右侧菜单

Question

我正在尝试达到以下效果

但我有输入 label 的问题 - 如果我要创建两个 div，复选框效果不起作用。 并且 css 网格也有问题来反转该列。

工作：

• 在点击之前，我们只看到白色列，
• 点击后我们看到黄色栏，
• 我们可以通过点击来切换它

Stackblitz 与当前版本：

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 在可见时填充空间的 rest

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

我还给了 label 一个正确的填充，以将其更多地放在中间，如图所示。 您可以将此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>