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

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

1 个答案: