3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载

这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计。这个UI设计共有三种不同的打开隐藏菜单的效果，分别为滑动显示，Material Design风格效果和展开式效果。

使用方法

HTML结构

这三种不同的隐藏菜单的HTML结构大致基本相同。第一种滑动效果菜单的HTML结构如下：

<div class="screen"> <div class="navbar"></div> <div class="list"> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> </div> <div class="burger"> <div class="x"></div> <div class="y"></div> <div class="z"></div> </div> </div> </div>

CSS样式

第一种隐藏菜单的滑动效果的CSS实现代码非常简单。整个菜单设置了固定的宽度和高度，并设置指定贝兹曲线的动画过渡效果。

div.menu { height: 568px; width: 320px; margin-left:-190px; opacity:0; position:relative; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

在菜单按钮被点击的时候，背景图片会轻微的移动一些，制作出一点视觉差效果。

#menu-bg{ position: absolute; left: -10px; top: -120px; opacity: 0.3; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

div.menu.animate #menu-bg{ left:-23px; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

菜单项使用margin-left值来制作动画效果，每一个菜单项都设置了不同的延迟时间，使它们有依次进入的效果。

div.menu ul{margin-top:110px;position:relative;} div.menu ul li { list-style: none; width: 320px; margin-top: 40px; text-align: left; padding-left: 100px; font-size: 23px; } div.menu ul li a { color:#fff; text-decoration:none; letter-spacing:1px; } div.menu.animate ul li { margin-left:80px; -webkit-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.menu.animate li:nth-of-type(1){transition-delay: 0.0s;} div.menu.animate li:nth-of-type(2){transition-delay: 0.06s;} div.menu.animate li:nth-of-type(3){transition-delay: 0.12s;} div.menu.animate li:nth-of-type(4){transition-delay: 0.18s;} div.menu.animate li:nth-of-type(5){transition-delay: 0.24s;}

另外在菜单按钮被点击的时候，屏幕层screen被推到屏幕的右边，这个效果通过修改它的left属性来完成。

div.screen{ width:320px; height:560px; overflow:hidden; position:absolute; top:0px; left:0px; background:#31558a; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.screen.animate{ left:254px; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

源码演示/下载请点击阅读原文

↓↓↓↓↓↓