1

Stackoverflow の読者の皆様へ

私はティンパヌスで見たものに頭を悩ませていましたが、そのようなことを適切に行う方法がわかりません。

このリンク: http://tympanus.net/Tutorials/FullscreenBookBlock/ では、メニューが完全に非表示になっていて、アイコンをクリックしたときにのみ表示されることがわかります。それは素敵な移行を持っており、基本的に私が達成しようとしていることを大まかに要約しています.

上記の例との唯一の違いは、このフルハイトの要素を完全に隠したくないということと、ボタンをクリックする代わりにホバーで上記の効果を達成したいということです。したがって、理想的な世界では、垂直バーが表示され、そのバーにカーソルを合わせると (または、タブレットの場合は指でクリックすると)、「開いて」内部のすべてのコンテンツが表示されます。 divを開きました。

今、私は html5 と css3 でまともなビットを作ることができますが、私が達成しようとしている上で説明した効果は、私に深刻な頭痛の種を与えました. これとまったく同じことを行う、私が見逃したかもしれないチュートリアルを知っている人はいますか?

ps: 私は Tympanus の html/css を分解しようとしましたが、そこに実装されているページ折り畳み効果では、それを理解できないようです。

4

1 に答える 1

7

http://jsfiddle.net/LDntf/2/

#menu{
    position:absolute;
    width:175px;
    padding-right:25px;
    top:0;
    bottom:0;
    margin-left:-175px;
    background:#d00;
    -webkit-transition:margin-left .5s ease-in-out;
    z-index:1;
}
#menu:hover{
    margin-left:0;
}

コンテンツを移動するには、コンテンツ div もアニメーション化するだけです: http://jsfiddle.net/LDntf/8/

#menu:hover + #content{
    left:200px;
    right:-175px;
}
#content{
    padding:1em;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    margin-right:-20px; /* hide the scrollbars */
    margin-bottom:-20px;
    left:25px;
    overflow:scroll;    /* always render the scrollbars, without this, the content may occasionally be cut off at the edge. */
    -webkit-transition:left .5s ease-in-out, right .5s ease-in-out;
}​
于 2012-12-12T21:44:38.583 に答える