在网上经常可以看到一些效果非常酷的隐藏侧边栏菜单效果。隐藏侧边栏作为一种新的菜单布局方式已经被越来越多的人所接受，它给用户一种全新的体验。特别是在移动手机等小屏幕设备上，隐藏侧边栏就显得特别有用。它不会占用多余的空间，只有在需要的时候才显示出来。
隐藏侧边栏菜单经常被使用在移动手机和一些触摸屏设备上。隐藏侧边栏最大的好处是不占用空间，并且只使用少量的javascript和CSS就可以制作出一个隐藏侧边栏效果。
隐藏侧边栏菜单经常是以一个jQuery插件的形式出现，在这篇文章中，我们将使用CSS3 transition 和 animation以及少量的jQuery代码来制作一个效果非常酷的隐藏侧边栏特效。
HTML结构
隐藏侧边栏菜单的HTML结构和普通的菜单的HTML结构稍微有一点不同。我们要关注下面的是三元素：
Container：这是整个页面的包裹容器，它会将隐藏侧边栏菜单和其它页面元素全部包裹起来。
Canvas：这个div是包裹隐藏侧边栏和其它元素的二级容器。
Navigation：这个div是隐藏侧边栏的包裹容器。
基本的HTML结构如下：
下面是添加了菜单项和页面其它元素的代码：
最低0.47元/天 解锁文章
2221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
