Pure CSS3 afficher/masquer la pleine hauteur de la div avec la transition

Cher Stackoverflow lecteurs,

J'ai été me casser la tête sur quelque chose que j'ai vu à Tympanus, et je ne peux pas comprendre comment bien faire une telle chose.

Dans ce lien: http://tympanus.net/Tutorials/FullscreenBookBlock/
vous pouvez voir que le menu est complètement caché, et uniquement visible lorsque vous cliquez sur une icône. Il a une belle transition, et fondamentalement à peu près résume ce que je suis en train d'accomplir.

La seule différence avec l'exemple ci-dessus, c'est que je ne veux pas cacher complètement cet élément de la hauteur, et j'aimerais faire de l'effet avec un hover au lieu d'avoir à cliquer sur un bouton. Ainsi, dans un monde idéal, vous devriez voir une barre verticale, et lorsque vous passez la souris sur cette barre (ou cliquez dessus avec votre doigt si vous êtes sur une tablette), il "s'ouvre" et vous montre l'intégralité du contenu à l'intérieur de l'ouverture de la div.

Maintenant, je peux faire un peu décent en html5 et css3, mais l'ai expliqué plus haut effet que je suis en train d'accomplir m'a donné des maux de tête graves, hehe. Est-ce quelqu'un connaîtrait un tutoriel, j'ai peut-être raté qui n'cette chose exacte?

p.s.: J'ai essayé de prendre part à la Tympanus' html/css, mais avec la page fois un effet également mis en œuvre en elle je n'arrive pas à le comprendre, d'où mon espoir que quelqu'un ici pour m'aider sur mon chemin 🙂

InformationsquelleAutor user1898838 | 2012-12-12
  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;
}

    Pour avoir le contenu déplacer, vous pouvez tout simplement animer la div du contenu ainsi: 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;
}​
    • Oh, celle-ci avec le hover est précisément ce que je cherchais, merci bien! 🙂 Juste pour ma connaissance: Si je voudrais déplacer le contenu de la zone, aussi bien quand vous passez la souris sur le menu-div, cela changerait-il quelque chose de fondamentalement dans votre solution? Votre exemple semble être une approche très différente de Ashley (la solution au-dessus de la vôtre); j'ai regardé dans les deux, mais pour une raison quelconque, ils mettent l'accent sur ma faiblesse, hehe. Je peux présentation décemment bien avec le html/css, mais pour faire bouger les choses (comme avec Ashley exemple) me fait tourner la tête 🙂
    InformationsquelleAutor Shmiddty