纯CSS3显示/隐藏全高度div与过渡

Question

亲爱的Stackoverflow读者,

我一直在为我在Tympanus看过的东西打破我的头脑,我无法弄清楚如何正确地做这样的事情.

在这个链接:http://tympanus.net/Tutorials/FullscreenBookBlock/ 你可以看到菜单是完全隐藏的,只有当你点击一个图标时才能看到.它有一个可爱的过渡,它基本上粗略地总结了我想要完成的事情.

与上面示例的唯一区别是我不想完全隐藏这个全高度元素,我想用悬停完成上述效果,而不必单击按钮.因此,在一个理想的世界中,你会看到一个垂直条,当你将鼠标悬停在那个条上时(或者如果你在平板电脑上,用手指点击它),它会"打开"并向你显示完整的内容.开了div.

现在,我可以在html5和css3中做出相当的一点,但上面解释的我想要完成的效果给了我严重的麻烦,呵呵.有没有人碰巧知道我可能错过的教程,这确实是这样的事情？

ps:我试图拆开Tympanus的html/css,但由于页面折叠效果也在其中实现,我似乎无法弄明白,因此我希望有人在这里帮助我:)

Answer 1

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