时间戳

首页 > 解决方案 > 在 CSS 中从右侧滑入 DIV？酷蓝示例

html - 在 CSS 中从右侧滑入 DIV？酷蓝示例

问题描述

好的，这只能在 CSS 中实现吗？检查https://www.coolblue.nl/televisies并单击浅蓝色菜单中的“建议”一词。您将在右侧看到一个包含额外信息的新页面，而无需您实际离开产品页面。这正是我需要的，但它必须是纯 CSS。

这样的事情甚至可能吗？

标签： htmlcssslide

解决方案

这是可能的，但这取决于你想要实现什么。

一种简单的方法是使用 checkbox 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 滑入，只需更改widthoderright属性并让它使用 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>

推荐阅读