当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/03 来源:互联网 浏览: 关键词:jquery 菜单导航 material 
jQuery炫酷Material Design风格全屏隐藏菜单特效 jQuery炫酷Material Design风格全屏隐藏菜单特效
阿里云

简要教程

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

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

使用方法

HTML结构

该隐藏菜单特效为了演示,制作了以个模拟手机屏幕的小窗口。导航菜单使用标准的无序列表结构。点击波效果需要的圆形使用一个空的<div>来制作。汉堡包图标为了制作动画效果,使用一个嵌套<div>的HTML结构。

<!--模拟手机屏幕-->
<divclass="screen">
  <divclass="navbar"></div>
  <divclass="list">
    <!--模拟屏幕中的列表项-->
      <divclass="item">
          <divclass="img"></div>
            <span></span>
            <span></span>
            <span></span>                   
        </div>
        ...
    </div>
    <!--点击波效果需要的圆形-->
    <divclass="circle"></div>
    <!--菜单列表-->
  <divclass="menu">
    <ul>
      <li><ahref="">About</a></li>
      <li><ahref="">Share</a></li>
      <li><ahref="">Activity</a></li>
            <li><ahref="">Settings</a></li>
            <li><ahref="">Contact</a></li>
    </ul>
  </div> 
  <!--汉堡包图标-->               
  <divclass="burger">
    <divclass="x"></div>
    <divclass="y"></div>
        <divclass="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:all300ms cubic-bezier(0.000,0.995,0.990,1.000);
     -moz-transition:all300ms cubic-bezier(0.000,0.995,0.990,1.000);
      -ms-transition:all300ms cubic-bezier(0.000,0.995,0.990,1.000);
       -o-transition:all300ms cubic-bezier(0.000,0.995,0.990,1.000);
          transition:all300ms cubic-bezier(0.000,0.995,0.990,1.000);
}
div.circle.expand{
  width:1200px;
  height:1200px;
  top:-560px;
  left:-565px;  
  -webkit-transition:all400ms cubic-bezier(0.000,0.995,0.990,1.000);
     -moz-transition:all400ms cubic-bezier(0.000,0.995,0.990,1.000);
      -ms-transition:all400ms cubic-bezier(0.000,0.995,0.990,1.000);
       -o-transition:all400ms cubic-bezier(0.000,0.995,0.990,1.000);
          transition:all400ms cubic-bezier(0.000,0.995,0.990,1.000);        
   
}      

在每个菜单项被点击后,会出现圆形光波往回收缩的效果。在一个菜单项被点击之后,插件会为菜单项添加animateclass,同时会移除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:all70ms cubic-bezier(0.000,0.995,0.990,1.000);
     -moz-transition:all70ms cubic-bezier(0.000,0.995,0.990,1.000);
      -ms-transition:all70ms cubic-bezier(0.000,0.995,0.990,1.000);
       -o-transition:all70ms cubic-bezier(0.000,0.995,0.990,1.000);
          transition:all70ms 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:all150ms cubic-bezier(0.000,0.995,0.990,1.000);
     -moz-transition:all150ms cubic-bezier(0.000,0.995,0.990,1.000);
      -ms-transition:all150ms cubic-bezier(0.000,0.995,0.990,1.000);
       -o-transition:all150ms cubic-bezier(0.000,0.995,0.990,1.000);
          transition:all150ms cubic-bezier(0.000,0.995,0.990,1.000);
}       

JAVASCRIPT

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

共有人阅读,期待你的评论!评论
Top