侧滑倒塌边栏

Question

我创建了一个侧边栏，当屏幕变小时会折叠。然后出现一个按钮以打开/关闭它。我使用过渡来以一种很好的方式隐藏/显示侧边栏。

侧边栏<div>隐藏着效果，但侧边栏的内容只是消失而没有任何效果。当我仔细观察开场行为时，我可以看到菜单首先出现，然后侧边栏出现效果。我也想要对菜单内容产生影响。

一切都在布局中。 css和一些代码在layout.js

中

演示：已移除

期望效果：http://detail.herokuapp.com/index.html

Answer 1

将transition: left .3s ease;添加到＃sidebar-nav。

我建议你阅读http://www.sitepoint.com/css3-sliding-menu/

Answer 2

侧边栏的堆叠顺序高于内容。您可以通过更改来更改：

#sidebar-nav {
z-index:0;
}

Answer 3

将转换添加到侧边栏导航，就是它！

#sidebar-nav{
-webkit-transition: all 0.2s ease-in-out;// I am adding webkit please add the rest yourself.
}