html - 纯 CSS3 显示/隐藏带过渡的全高 div

Question

亲爱的 Stackoverflow 读者，

我一直在为我在 Tympanus 看到的东西而伤脑筋，我想不出如何正确地做这样的事情。

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

与上述示例的唯一区别是我不想完全隐藏这个全高元素，我想通过悬停而不是单击按钮来完成上述效果。因此，在理想情况下，您会看到一个垂直条，当您将鼠标悬停在该条上时(如果您使用的是平板电脑，则用手指单击它)，它会“打开”并向您显示其中的全部内容打开分区。

现在，我可以在 html5 和 css3 中取得不错的成绩，但是我试图实现的上述效果让我很头疼，呵呵。有没有人碰巧知道我可能错过了一个教程来做这件事？

p.s.: 我曾尝试拆解 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;
}​