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

亲爱的读者：

我一直在为我在鼓室看到的一些事情而头疼，我不知道如何正确地做这样的事情

在此链接中： 您可以看到菜单完全隐藏，只有在单击图标时才可见。它有一个可爱的过渡，基本上概括了我要完成的任务

与上面示例的唯一区别是，我不想完全隐藏这个全高元素，我希望通过悬停来实现上述效果，而不必单击按钮。因此，在理想情况下，你会看到一个竖条，当你将鼠标悬停在竖条上，或者在平板电脑上用手指点击它时，它会打开并显示打开的div中的全部内容

现在，我可以在html5和css3中做出一点不错的贡献，但是上面解释的效果让我很头疼，呵呵。有没有人碰巧知道我可能错过的一个教程，它做的正是这件事

p、 美国：我曾尝试拆分Tympanus的html/css，但由于其中也实现了页面折叠效果，我似乎无法理解这一点，因此我希望这里有人能在我的道路上帮助我：

要移动内容，也可以简单地设置内容div的动画：

要移动内容，也可以简单地设置内容div的动画：

---

哦，这个带悬停的正是我要找的，也谢谢你！：但就我所知：如果我想在您悬停在menu div上时移动内容区域，这会从根本上改变您的解决方案吗？你的例子似乎与你上面的解决方案Ashley截然不同；我都看了，但出于某种原因，它们都突出了我的弱点，呵呵。我可以很好地使用html/css进行布局，但是要像Ashley的例子那样移动东西会让我头晕目眩：哦，这个带悬停的正是我想要的，谢谢你但就我所知：如果我想在您悬停在menu div上时移动内容区域，这会从根本上改变您的解决方案吗？你的例子似乎与你上面的解决方案Ashley截然不同；我都看了，但出于某种原因，它们都突出了我的弱点，呵呵。我可以很好地使用html/css进行布局，但要像Ashley的例子那样让事情进展顺利，我会头晕目眩：

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

#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;
}​