jQuery炫酷Material Design风格全屏隐藏菜单特效

当前位置:主页 > jQuery库 > 菜单和导航 > jQuery炫酷Material Design风格全屏隐藏菜单特效
jQuery炫酷Material Design风格全屏隐藏菜单特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-18
    阅读:
简要教程

这是一款谷歌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.circleexpand,这样,光波就会往回缩放到最小状态。

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);
}                
              
JAVASCRIPT

该菜单特效使用会自动判断是touch事件还是鼠标点击事件。并使用jQuery来为汉堡包图标的点击事件和菜单的点击事件添加以移除相应的class。在打开和关闭菜单的时候,代码中都使用了setTimeout函数来添加一些延迟。js代码非常简单,仔细研究一下就会明白代码的含义。