在CSS中从右边滑入DIV？酷蓝示例

Question

好的，这只能在 CSS 中实现吗？选中 https://www.coolblue.nl/televisies 并单击浅蓝色菜单中的单词：'Advies'。您会在右侧看到一个包含额外信息的新页面，而您实际上并没有离开产品页面。这正是我需要的，但它必须是纯粹的 CSS.

这样的事情有可能吗？

Answer 1

可以，但是要看你想达到什么目的。

一种简单的方法是使用复选框 hack 来简单地创建一个隐藏的复选框和一个标签，其中包含单击按钮时要显示的块。可能是这样的：

#controllbox {
    display: none;
}

.infopage{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  width: 200px;
  height: 100%;
  background-color: lightblue;
  display: none;
}

#controllbox:checked + label > .infopage {
    display: block;
}

<input type="checkbox" id="controllbox"/>
<label class="linkbutton" for="controllbox">
  Click me!
  <div class="infopage">
    here the text in the info box .....
  </div>
</label>

如果你想要 div 滑入，只需更改 width 或 right 属性并让它与 css 一起动画。

如果您需要更复杂的逻辑，javascript 可能是更好的解决方案。

编辑：

JS 解决方案可能如下所示：

.item{
  display: inline-block;
  cursor: pointer;
  padding: 2px;
  margin-right: 3px;
  margin-left: 3px;
  font-weight: bold;
}

.infobox{
  position: fixed;
  top: 0;
  height: 100%;
  right: -200px;
  width: 200px;
  background-color: lightblue;
  transition: right 0.6s;
}

.infobox.open{
  right: 0;
}

<div class="menu">
 <span class="item" onclick="document.querySelector('#' + this.getAttribute('data-infobox')).classList.toggle('open');" data-infobox="infobox1">Click Me!</span>
</div>
<div id="infobox1" class="infobox">
some text to show
</div>

在CSS中从右边滑入DIV？酷蓝示例

Slide in DIV from the right in CSS? CoolBlue example

html

css

slide