在手机客户端上，我们常常会发现有很多这样子的效果，点击某个按钮，左边隐藏的菜单会出现，内容则被折开。类似于下面这样子。
然后点击菜单跳转之后左边的菜单子弹自动收起来。或者再次点击上面的按钮，同样左边收起来，内容就完整显示了。
这个在web页面上也同样可以实现，而且很简单。你可以使用CSS3的动画效果来做，也可以使用JS来实现效果。本文讲的是CSS3的效果，当然完整的例子还是得用JS来实现的。
前面的文章中我们提到CSS3的动画一般可以用两种方式，一种是使用:checked，另一种是使用:target。
本例子中实现的关键代码：
.main{
position: relative;
width:100%;
background: #fff;
-webkit-transition:all .25s;
transition:all .25s;
min-height:300px;
}
#tm:checked ~ .main{-webkit-transform:translateX(150px);-ms-transform:translateX(150px);transform:translateX(150px);}
当点击按钮时.main向左移动150像素，也就是侧栏的宽度了。
PS：这个http://code.qdkfweb.cn 是使用github页面做成的。使用github感觉有时候很坑爹啊。会出现上传错误之类的。不太想折腾的，写技术博客的更是没有这个想法。
还是自己控制博客，用熟悉的东西好点。
上面这个不够完美的，想要完美实现效果，当然是用js了。使用了zepto.js框架了，下面这个演示就是这个框架的，跟jQuery使用差不多，不过体积小多了。
2014.4.16：功能完善，增加了当点击左边出来的时候，点击右边内容的任意区域，左边的内容都可以缩回去。
