1

ボタンをクリックすると、タイトルの下からセクションがスライドしてコンテンツが表示される Web ページを作成しようとしています。下にあるすべての要素をスライドさせると、下にスライドする必要があります。

私はHTMLとCSSだけでこれを機能させています...私の方法は、それ自体をスライドさせるものをクリックし、クリックしたままにするとスライドダウンします。クリックを離すと、div スライドが元に戻ります。

これは、スライドアウト div に配置された次の CSS を介して行われます。

#slide-out {
  -moz-transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
  z-index: -1;
  height: 73px;
  margin-top: -98px;
  position: relative ;
}

#slide-out:active {
  margin-top: 0px;
}

それに付随する HTML は次のとおりです。

<div id="wrapper">
    <div class="section-title">Project</div>    

    <div id="slide-out">
    Test
    </div> <!-- of slide out -->

    <div class="section-title">The Team</div>

</div>

ただし、次のようにしたいと思います。

  • 高さは、後続の要素に影響を与えることなく、はるかに大きくすることができます
  • スライドするためにボタンを押し続ける必要はありません（トグルメカニズムのほうが多いです）
  • div スライドアウトまたは div スライドアウトに含まれていないボタンをクリックできます

どうもありがとう！

これまでコードを実行していたこと: http://www.1stwebdesigner.com/tutorials/slide-out-panel-css3/

4

1 に答える 1

0

なぜWebkitに限定するのですか？Jquery slideDown() は、ブラウザ間の互換性を高めるために必要なことを行うことができます: http://api.jquery.com/slideDown/

于 2013-03-06T17:46:21.257 に答える