web-dev-qa-db-ja.com

純粋なCSSをクリックしてdivを下にスライドしますか？

私はこの投稿を見つけました クリックでスライドDIVを作成する方法？

しかし、すべての答えはJqueryメソッドです。 PURE CSSでこれを作成する方法はありますか？他にもいくつか心に留めていることがあります...

  1. スクロール時にdivをスライドさせたままにするために何を追加できますか
  2. Divを上にスライドさせるには、アニメーションをトリガーするリンクを「閉じる」に変更します

ここにその投稿の例へのリンクがあります// http://shutterbugtheme.tumblr.com/

私もグーグルを試しましたが、唯一の結果はjqueryメソッドです...

cssanimationhtmlslidedown
6
KXXT

少しハックですが、それは可能です。状態を保持する2つの要素（CSSでは：checkedと呼ばれます）は、チェックボックスとラジオボタン要素です。したがって、for属性を使用してチェックボックスをラベルに関連付け、divを追加すると、（非表示）ボタンのステータスを読み取ることで結果を取得できます。

<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

そしてCSS：

input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

アニメーション化された開閉効果を含む詳細な説明と例 。

10
Dudley Storey

これは、純粋なCSSではクリックを認識できません。 ：hoverとtransitionでそれを行うことができますが、それはあなたがjavascriptなしで得ようとしているのと同じくらい近いです。

.hover
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slide
{
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.hover:hover + .slide
{
    top: 50px;
}

http://jsfiddle.net/Kyle_/MaMu9/1/

ただし、遷移はCSS3であり、IE <9および古いバージョンの優れたブラウザーでは機能しないことに注意してください。

編集：CSSの：focusプロパティを使用して別の回答が投稿された後：1つの注意点があります。下にスライドさせる要素の外側をクリックして、上にスライドさせる必要があります。それ以外の場合はうまく機能します。

これを機能させるには、要素にtabindex = '1'（または要素がドキュメントのどこにあるかによって意味のある任意の数）が必要であることに注意してください。

.hover:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/

6
Kyle

要素の「フォーカス」イベントを認識し、CSSトランジションを使用してそれに対処できます。

クリックするとdivを50ピクセル下に移動する例を次に示します

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;
}

作業例： http://jsfiddle.net/NBHeJ/

3
lostsource

これは、開始方法の良い例です。下部にあるように、JavaScriptですが、使用するanimate関数のソースを投稿しています。

sliding-js-generic

純粋なcssが必要な場合は、長年にわたってws3schoolsを優れたリソースとして使用しますが、必要な効果が機能するかどうかは、ブラウザのサポートに大きく依存します。

w3schools-css

彼らが持っている効果を作るための基本的な構造、あなたはボディ内の2つのdivの線に沿って、上部が非表示でコンテナが見えるように作業し、非表示のdivのアニメーションを実行して、他のdivを押し下げて表示するだけです。それらは両方ともインラインです。

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>
2
Calvin

このコードを実行します。

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>
1
Sedric Heidarizarei

これは、クリックを検出するためにtarget疑似クラスを使用して行うことができます。

ボタンのhrefをスライディングdivのIDに設定します。

次に、高さのcss3 transitionを使用して、slidingDiv：targetクラスのスライディングdivの高さを設定することにより、下にスライドできます。

元のボタンがhrefを変更して純粋なCSSを使用してスライドdivを閉じる方法はないと思いますが、スライドdivに閉じるボタンを追加して閉じることができます。

この閉じるボタンは、スライディングdivクラスに同じ遷移を追加することで機能します。

これはWORKING DEMOです。

楽しい。

1
Danield

同じことをする別の方法：

.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);
}

作業例： https://jsfiddle.net/webarthur/3ep33h5s/1/

0
Arthur Araújo

簡単：

.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;
}

作業例： https://jsfiddle.net/webarthur/3ep33h5s/

0
Arthur Araújo