jQuery和CSS3汉堡包导航菜单打开动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常炫酷的jQuery和CSS3汉堡包导航菜单打开动画特效。该汉堡包动画中，用户点击汉堡包图标时，图标以弹性变形的方式水平展开。整个动画的特点是弹性十足！

使用方法

HTML结构

该汉堡包菜单展开动画的HTML结构非常简单：使用一个div.menu作为包裹容器，在它里面div.container是汉堡包图标的容器，div.toggle是汉堡包图标，最后的一组<span>元素是隐藏的菜单项。

<div class="menu">
  <div class="container">
    <div class="toggle"></div>
  </div>
  <span class="hidden item"><a href="#">首页 </a></span>
  <span class="hidden item"><a href="#">最新文章 </a></span>
  <span class="hidden item"><a href="#">关于我们 </a></span>
  <span class="hidden item"><a href="#">联系我们 </a></span>
</div>

CSS样式

.menu容器被设置了固定的宽度和高度，以及圆角和阴影效果。在菜单展开动画过程中，它的宽度会被修改，这里使用了自定义的贝兹曲线函数来设置它的动画过渡效果。这个贝兹曲线函数是一种带有弹性效果的过渡动画。

.menu {
  display: block;
  box-sizing: border-box;
  background: white;
  height: 87.75px;
  width: 87.75px;
  padding: 36px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin: 30px auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
}
.menu.expanded {
  width: 420px;
}

菜单项开始时是不可见的，并通过nth-of-type为每一个菜单项设置不同的动画延迟时间。

span.hidden {
  width: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(90deg);
}
span.hidden:nth-of-type(1) {
  transition-delay: .3s;
}
span.hidden:nth-of-type(2) {
  transition-delay: .2s;
}
span.hidden:nth-of-type(3) {
  transition-delay: .1s;
}
span.hidden:nth-of-type(4) {
  transition-delay: 0s;
}

当菜单展开时，各个菜单项上的.hidden class被移除，此时菜单项变为可见状态，同样通过nth-of-type来为各个菜单项设置动画延迟时间。

span.item {
  padding: 9px;
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
  transition: .3s;
  transform: rotateY(0deg);
}
span.item:nth-of-type(1) {
  transition-delay: .4s;
}
span.item:nth-of-type(2) {
  transition-delay: .5s;
}
span.item:nth-of-type(3) {
  transition-delay: .6s;
}
span.item:nth-of-type(4) {
  transition-delay: .7s;
}

.toggle用于制作汉堡包图标的水平线条。

.container {
  position: absolute;
  top: 22.5px;
  right: calc(100% - 73.125px);
  height: 42.75px;
  width: 58.5px;
  transition: 1s;
}
.container.close {
  right: 0;
}

.toggle {
  position: relative;
  height: 42.75px;
  width: 58.5px;
  cursor: pointer;
}
.toggle:after, .toggle:before {
  content: '';
  background: #1D90F5;
  width: 36px;
  height: 4.5px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
}
.toggle:before {
  top: -30%;
}
.toggle:after {
  top: 30%;
}

当汉堡包图标被点击之后，它会被添加一个.close class，该class使汉堡包图标的两条线条分别旋转+225度和-225度，组成一个小叉。

.toggle.close:before {
  transform: rotate(-225deg);
  top: 0;
}
.toggle.close:after {
  transform: rotate(225deg);
  top: 0;
}

JavaScript

该特效中使用jQuery来监听菜单按钮的点击事件，并为相应的元素添加和移除相应的class类。

$(function(){
  $('.toggle').on('click', function() {
    $('.menu').toggleClass('expanded');  
    $('span.item').toggleClass('hidden');  
    $('.container , .toggle').toggleClass('close');  
  });
})