左侧和右侧的侧窗格使用CSS和HTML

I like to create a site, where it is possible to open one Sidepane from the Left or one frome the right. I am not good in JavaScript (and I don't like it either) so that I would prefer a solution with pure CSS and HTML. I found a site that does kind of exactly what I want, but using JS:

我喜欢创建一个网站,可以从左边打开一个边框,或者从右边打开一个边框。我不擅长JavaScript(我也不喜欢它)所以我更喜欢纯CSS和HTML的解决方案。我找到了一个完全符合我想要的网站但是使用JS:

http://www.huntand.co/

Do you know any nice solutions?

你知道任何好的解决方案吗?

1 个解决方案

#1

While I do not agree with your philosophy in regards to learning, you could accomplish a double pain solution using CSS. Although don't expect to fire off any click events (you should really attempt to learn JS). At least make an effort.

虽然我不同意您在学习方面的理念,但您可以使用CSS实现双重痛苦解决方案。虽然不希望发生任何点击事件(你应该真正尝试学习JS)。至少要付出努力。

HTML:

<div class="container">
  <div class="col left"></div>
  <div class="col right"></div>
</div>

CSS:

html,body{
  margin:0;
  height:100%;
  overflow:hidden;
}
.container{
  height:100%;
  width:100%;
  background:#F8F8F8;
  position:relative;
}
.col{
   height:100%;
   width:60%;
   min-width:40px;
   position:absolute;
   top:0;
   transition: 1s ease;
}
.left{
   background:#888;
   left:-50%;
}
.right{
   background:#222;
   right:-50%;

}
.right:hover{
  right:0;
}
.left:hover{
  left:0;
}

Example: CodePen

#1