Slide down div on click Pure CSS?

2020-06-19 03:26发布

站内问答 / HTML/CSS
1701 8 6

I found this post How to create sliding DIV on click?

But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well...

  1. What can I add to make the slide down div stay put when scrolling
  2. Change the link that triggers the animation to "Close" in order to make the div slide back up

Here is a link to the example in that post// http://shutterbugtheme.tumblr.com/

I've also tried googling but the only results are jquery methods...

8条回答
Fickle 薄情
2楼-- · 2020-06-19 03:26

You can recognize a 'focus' event on an element and act upon it using a CSS transition.

Here's an example which will move a div 50px down when clicked

Markup

<div tabindex='1' id='box'></div>​

CSS

#box {
 background-color:#3a6d90;
 width:100px; height:100px;    

 transition: margin-top 2s;
 -moz-transition: margin-top 2s; /* Firefox 4 */
 -webkit-transition: margin-top 2s; /* Safari and Chrome */
 -o-transition: margin-top 2s; /* Opera */
}

#box:focus {
 margin-top:50px;
 outline:0;
}

Working example: http://jsfiddle.net/NBHeJ/

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
3楼-- · 2020-06-19 03:33

Easy:

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden
}
.slide-up > div, .slide-down > div {
  margin-top: -25%;
  transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {            
  margin-top: 0;
}

Working example: https://jsfiddle.net/webarthur/3ep33h5s/

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
4楼-- · 2020-06-19 03:35

Another way to do the same thing:

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
}

Working example: https://jsfiddle.net/webarthur/3ep33h5s/1/

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
5楼-- · 2020-06-19 03:40

This can be done using the target pseudo class to detect the click.

Set the button href to the id of the sliding div.

The slide down can then be done by setting the height of the sliding div on the slidingDiv :target class using a css3 transition on the height.

I don't think there's a way for the original button to change its href to close the sliding div using pure css, however you could always add a close button on the sliding div to close it.

This close button works by adding the same transition on the sliding div class.

Here is a WORKING DEMO.

Enjoy.

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
6楼-- · 2020-06-19 03:41

This is a good example of how to get started. You can see at the bottom, they post the source for the animate function they use, although this is javascript.

sliding-js-generic

If you want pure css, I'd use ws3schools has been excellent resource for many years, though be aware that a lot depends on browser support as to whether the effect you want will work or not.

w3schools-css

Basic structure to make the effect they have, you just need to work along the lines of two divs within the body, at the top hidden and the container visible, and run the animation of the hidden div to display pushing the other div down, keeping them both inline.

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
7楼-- · 2020-06-19 03:41

Run This Code.

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: tomato;
  color: #FFF;
  font-family: arial;
  -webkit-transition: background-color 0.1s, color 0.1s;
}

label:hover {
  background: #blue;
  color: #blue;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: tomato;
  margin-top: 10px;
  color: #FFF;
}

input:checked + .test {
  height: 100px;
}
<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="test">
  <p>I am some hidden text</p>
</div>

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)