jQuery炫酷Material Design风格全屏隐藏菜单特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款谷歌Material Design风格的炫酷全屏隐藏菜单jQuery特效。该菜单特效开始时以汉堡包图标的形式隐藏菜单，但用户点击汉堡包图标后，菜单会从图标处开始以点击波的形式扩展到全屏，效果非常酷。

该菜单特效可以用于移动手机设备使用，也可以用于台式机使用，相应的修改一下CSS代码即可使用。

使用方法

HTML结构

该隐藏菜单特效为了演示，制作了以个模拟手机屏幕的小窗口。导航菜单使用标准的无序列表结构。点击波效果需要的圆形使用一个空的<div>来制作。汉堡包图标为了制作动画效果，使用一个嵌套<div>的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>
    <!--点击波效果需要的圆形-->
    <div class="circle"></div>
    <!--菜单列表-->
  <div class="menu">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Share</a></li>
      <li><a href="">Activity</a></li>
            <li><a href="">Settings</a></li>
            <li><a href="">Contact</a></li>
    </ul>
  </div>  
  <!--汉堡包图标-->                
  <div class="burger">
    <div class="x"></div>
    <div class="y"></div>
        <div class="z"></div>
  </div>    
</div>

CSS样式

插件中使用CSS3 transforms和transition，配以适当的cubic-bezier函数来制作各种动画效果。其中点击波的效果的CSS样式如下：

div.circle{ 
  border-radius: 50%;
  width: 0px;
  height: 0px; 
  position:absolute;
  top: 35px;
  left: 36px;
  background:#fff;
  opacity:1;
  -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}
div.circle.expand{
  width:1200px;
  height:1200px;
  top: -560px;
  left: -565px;   
  -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);         
  
}

在每个菜单项被点击后，会出现圆形光波往回收缩的效果。在一个菜单项被点击之后，插件会为菜单项添加animate class，同时会移除div.circle的expand，这样，光波就会往回缩放到最小状态。

div.menu {
  height: 568px; 
  width: 320px;
  position: absolute;
  top: 0px; left: 0px;
}
div.menu ul li {
  list-style: none;
  position:absolute;
  top:50px;;
  left:0;
  opacity:0;
  width:320px;
  text-align:center;
  font-size:0px;
  -webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu ul li a {
  color:#4a89dc;
  text-transform:uppercase;
  text-decoration:none; 
  letter-spacing:3px;     
}

div.menu li.animate{
  font-size:21px;
  opacity:1;
  -webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
      -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
          transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}