代码之家 › 专栏 › 技术社区 › Luca Detomi

多个可滑动侧板

slide css

Luca Detomi · 技术社区 · 5 年前

我在努力创造 多个可滑动侧板 ,隐藏在屏幕右侧的外部。

Here the prototype ( 我把它们转过来几乎 ).

代码的相关部分是:

.container {
  display:flex;
  flex-direction:column;
  position:absolute;
  top:0;
  right:0;
  width:200px;
  height:100%;
  transform:translateX(150px);      /*Should be 170px to place outside view*/
}

.side-panel {
  display:flex;
}

.side-panel.open {
  transform:translateX(-170px);
}

.content {
  position:absolute;
  top:0;
  right:0;
  width:calc(100% - 34px);
  height:100%;
}

如您所见,有3个侧板,每个侧板都可以打开,点击黄色标签(显示广告1、2、3)。在半隐藏区域中,还可以看到重叠的每个窗格的内容。

目标应该是 .toggle 标签应该像示例中那样堆叠,但是它们的内容应该填满容器的整个高度(可以看到,当面板关闭到右侧时,这种情况下的内容由于其 position:absolute ,但当您打开其中一个容器时,它将被限制在其direct flex容器中),就像您在关闭时看到的那样。

求你了,怎么解决?