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 回答