简单的MaterialDesign风格手机App菜单特效

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

的HTML结构。导航菜单使用 元素来制作。p.nav-toggle是用于制作圆形的扩展动画，p.icon是汉堡包图标。

<div class="phone">
  <div class="screen">
    <nav class="nav">
      <ul>
        <li><a href="#">搜　索</a></li>
        <li><a href="#">主　页</a></li>
        <li><a href="#">HTML5学习</a></li>
        <li><a href="#">CSS3学习</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    <div class="nav-toggle">
      <div class="icon"></div>
    </div>
    <div class="lower-screen">
      <div class="card">
        <h2>Material cards</h2>
        <p>...</p>
      </div>
        
      <div class="card">
        <h2>..</h2>
        <p>...</p>
        </p>
      </div>
    </div>
  </div>
</div> 

　　 CSS样式
　　在这个APP节目设计中，手机的界面采用固定的宽度和高度，并设置为固定定位。手机的屏幕也设置了固定的宽度和高度，并设置为相对定位。

查看更多关于简单的MaterialDesign风格手机App菜单特效的详细内容...