元素来包裹3个元素。元素用于制作汉堡包按钮的三条线。

CSS样式

在style.css文件中，分别为这12中效果制定了变形动画的CSS3代码，例如第一种变形动画的CSS代码如下：

#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}                  
                

JavaScript

在用户点击汉堡包按钮时，使用jquery代码为该汉堡包按钮切换is-active class类。

$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
  });
});