简要教程
这是一款非常简单的material design风格手机app菜单特效。该特效使用css3和少量的jquery代码来完成。在用户点击汉堡包菜单按钮之后，按钮会变形放大到整个手机app屏幕，同时菜单选项会从屏幕下方滑动上来，效果非常酷。
制作方法
HTML结构
该APP菜单的HTML结构使用嵌套
Shop7z网上购物系统普及版
下载
Shop7z网上购物系统是基于ASP开发的简单易用的商城建站平台，Shop7z可以满足不同企业、个人的各种网上开店需求！普及版是一套简便易用的商城系统，支持商品图片批量上传、淘宝导入、商品批量修改等实用功能，还支持手机版以及APP的整合，普及版支持4种不同的模板风格，支持支付宝、财付通、网银在线等支付接口,系统还支持新订单邮件通知、多种分类排序、商品归属多分类等功能，支持五种会员价格体系等。
Material cards
...
..
...
CSS样式
在这个APP节目设计中，手机的界面采用固定的宽度和高度，并设置为固定定位。手机的屏幕也设置了固定的宽度和高度，并设置为相对定位。
.phone {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 280px;
height: 580px;
border-radius: 40px;
background-color: white;
}
.phone .screen {
width: 260px;
height: 450px;
background-color: #ECEBE9;
display: block;
margin: 65px auto;
overflow: hidden;
position: relative;
border-radius: 2px;
border: 4px solid #262626;
}
汉堡包图标的包裹元素设置为一个半径30像素的圆形。它的:before伪元素设置为和它同样的大小，后面会使用这个伪元素来制作圆形扩展的动画效果。
.nav-toggle {
width: 60px;
height: 60px;
z-index: 2;
border-radius: 50%;
margin: 10px;
position: absolute;
cursor: pointer;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.66s;
transition-duration: 0.66s;
-webkit-transition-timing-function: swing;
transition-timing-function: swing;
}
.nav-toggle:before {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #4A75E6;
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition-duration: 0.66s;
transition-duration: 0.66s;
-webkit-transition-timing-function: swing;
transition-timing-function: swing;
}
在用户点击了汉堡包图标之后，特效中使用jQuery代码来为body元素切换class，当body元素被添加了.nav-openclass之后，.nav-toggle:before伪元素开始动画，圆形开始扩展。
body.nav-open .nav-toggle:before {
width: 1200px;
height: 1200px;
background-color: rgba(74, 117, 230, 0.95);
} 整个效果的CSS代码十分简单，具体请参考下载文件。
以上就是简单的Material Design风格手机App菜单特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！
