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