抽屉菜单在手机native应用中很常见。比如酷狗手机版的界面:
左侧为操作菜单,默认不显示。需要时向左滑动界面,操作菜单将从侧边缓缓展示出来,不需要时向右滑动界面,操作菜单又将隐藏在侧边而不会占位置,操作菜单这种缓入缓出用户体验非常不错。这里采用css3实现抽屉菜单效果。以下代码以及实例请在基于webkit手机浏览器下访问。
html代码如下:
1
2
3
4
View Code
样式代码如下:
1 .container{
2 position: relative;
3 height: 300px;
4 overflow-x: hidden;
5 }
6 .left, .right