简单的Material Design风格手机App菜单特效

时间：2016-03-06
　　简要教程
　　这是一款非常简单的Material Design风格手机App菜单特效。该特效使用CSS3和少量的jQuery代码来完成。在用户点击汉堡包菜单按钮之后，按钮会变形放大到整个手机APP屏幕，同时菜单选项会从屏幕下方滑动上来，效果非常酷。

1.jpg
查看演示    下载插件

　　制作方法
　　HTML结构
　　该APP菜单的HTML结构使用嵌套<div>的HTML结构。导航菜单使用<nav>元素来制作。div.nav-toggle是用于制作圆形的扩展动画，div.icon是汉堡包图标。
  1. <div class="phone">
  2.   <div class="screen">
  3.     <nav class="nav">
  4.       <ul>
  5.         <li><a href="#">搜　索</a></li>
  6.         <li><a href="#">主　页</a></li>
  7.         <li><a href="#">HTML5学习</a></li>
  8.         <li><a href="#">CSS3学习</a></li>
  9.         <li><a href="#">联系我们</a></li>
  10.       </ul>
  11.     </nav>
  12.     <div class="nav-toggle">
  13.       <div class="icon"></div>
  14.     </div>
  15.     <div class="lower-screen">
  16.       <div class="card">
  17.         <h2>Material cards</h2>
  18.         <p>...</p>
  19.       </div>
  20.       
  21.       <div class="card">
  22.         <h2>..</h2>
  23.         <p>...</p>
  24.         </p>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </div>            
复制代码

　　CSS样式
　　在这个APP节目设计中，手机的界面采用固定的宽度和高度，并设置为固定定位。手机的屏幕也设置了固定的宽度和高度，并设置为相对定位。
  1. .phone {
  2.   position: fixed;
  3.   top: 50%;
  4.   left: 50%;
  5.   -webkit-transform: translateX(-50%) translateY(-50%);
  6.       -ms-transform: translateX(-50%) translateY(-50%);
  7.           transform: translateX(-50%) translateY(-50%);
  8.   width: 280px;
  9.   height: 580px;
  10.   border-radius: 40px;
  11.   background-color: white;
  12. }
  13. .phone .screen {
  14.   width: 260px;
  15.   height: 450px;
  16.   background-color: #ECEBE9;
  17.   display: block;
  18.   margin: 65px auto;
  19.   overflow: hidden;
  20.   position: relative;
  21.   border-radius: 2px;
  22.   border: 4px solid #262626;
  23. }            
复制代码

　　汉堡包图标的包裹元素设置为一个半径30像素的圆形。它的:before伪元素设置为和它同样的大小，后面会使用这个伪元素来制作圆形扩展的动画效果。
  1. .nav-toggle {
  2.   width: 60px;
  3.   height: 60px;
  4.   z-index: 2;
  5.   border-radius: 50%;
  6.   margin: 10px;
  7.   position: absolute;
  8.   cursor: pointer;
  9.   box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  10.   -webkit-transition-duration: 0.66s;
  11.           transition-duration: 0.66s;
  12.   -webkit-transition-timing-function: swing;
  13.           transition-timing-function: swing;
  14. }
  15. .nav-toggle:before {
  16.   width: 60px;
  17.   height: 60px;
  18.   border-radius: 50%;
  19.   background-color: #4A75E6;
  20.   content: "";
  21.   position: absolute;
  22.   top: 50%;
  23.   left: 50%;
  24.   -webkit-transform: translateX(-50%) translateY(-50%);
  25.       -ms-transform: translateX(-50%) translateY(-50%);
  26.           transform: translateX(-50%) translateY(-50%);
  27.   -webkit-transition-duration: 0.66s;
  28.           transition-duration: 0.66s;
  29.   -webkit-transition-timing-function: swing;
  30.           transition-timing-function: swing;
  31. }               
复制代码

　　在用户点击了汉堡包图标之后，特效中使用jQuery代码来为body元素切换class，当body元素被添加了.nav-openclass之后，.nav-toggle:before伪元素开始动画，圆形开始扩展。
  1. body.nav-open .nav-toggle:before {
  2.   width: 1200px;
  3.   height: 1200px;
  4.   background-color: rgba(74, 117, 230, 0.95);
  5. }      
复制代码
　　整个效果的CSS代码十分简单，具体请参考下载文件。

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/css3/daohangcaidan/201507132222.html

上一篇：基于PHP的超炫酷HTML5交互式图表 下一篇：响应式编程（Reactive Programming）介绍

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权