谷歌Material design风格隐藏侧边栏特效

这是一款非常实用的谷歌Material design风格隐藏侧边栏特效。用户可以通过点击左上角的汉堡包图标来打开和隐藏侧边栏菜单。在侧边栏菜单打开时，整个页面就像是被向右下推动一些距离，效果非常不错。

制作方法

HTML结构

在这个隐藏侧边栏特效的HTML结构中，菜单使用<nav>元素来制作，汉堡包图标是一个<div>，正文内容包裹在一个div.wrapper元素中。

<!--导航菜单-->
<nav>
  <ul>
    <li>Home</li>
    <li>About me</li>
    <li>Blog</li>
    <li>Contact</li>
  </ul>
</nav>
<!--汉堡包图标-->
<div class="openNav">
  <div class="icon"></div>
</div>
<!--正文内容-->
<div class="wrapper">
  ...
</div>
              

CSS样式

页面正文的包裹<div>设置100%的高度和宽度，定位方式为相对定位。同时设置动画过渡的延迟时间为0.5s，以及动画过渡的timing函数为swing。

.wrapper {
  transition-duration: 0.5s;
  transition-timing-function: swing;
  background-color: white;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 100px 40px;
}
              

在隐藏侧边栏处于打开状态时，正文div被向右移动250像素，向下移动50像素。

.wrapper.open {
  transform: translateX(250px) translateY(50px);
  -webkit-transform: translateX(250px) translateY(50px);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}               
              

汉堡包图标使用icon以及它的:before和:after伪元素来制作。

.openNav .icon {
  transition-duration: 0.2s;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: white;
  top: 24px;
  left: 10px;
}
.openNav .icon:before,
.openNav .icon:after {
  transition-duration: 0.5s;
  background-color: white;
  position: absolute;
  content: "";
  width: 30px;
  height: 2px;
  left: 0px;
}
.openNav .icon:before {
  top: -7px;
}
.openNav .icon:after {
  top: 7px;
}               
              

然后在汉堡包图标被点击时使用rotate()来分别对它们进行相应的旋转，制作图标变形动画。

.openNav.open {
  transform: translateX(250px) translateY(50px);
  -webkit-transform: translateX(250px) translateY(50px);
}
.openNav.open .icon {
  background-color: transparent;
}
.openNav.open .icon:before,
.openNav.open .icon:after {
  top: 0;
}
.openNav.open .icon:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.openNav.open .icon:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}              
              

JAVASCRIPT

该隐藏侧边栏特效使用jQuery来在汉堡包图标被点击的时候为相应的元素添加和移除相应的class。

$('.openNav').click(function () {
    $('body').toggleClass('navOpen');
    $('nav').toggleClass('open');
    $('.wrapper').toggleClass('open');
    $(this).toggleClass('open');
});