基于html5菜单列表项展开动画特效

基于html5菜单列表项展开动画特效。这是一款jquery+html5实现的汉堡包图标点击展开变为菜单列表项动画特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="demo">
  <div class="demo__overlay"></div>
  <div class="demo__menu-btn">
    <div class="demo__menu-btn-line"></div>
    <div class="demo__menu-btn-line"></div>
    <div class="demo__menu-btn-line"></div>
  </div>
  <div class="demo__menu-bg"></div>
  <div class="demo__menu-items">
    <div class="demo__menu-item" data-section="home">Home</div>
    <div class="demo__menu-item" data-section="source">Source of inspiration</div>
    <div class="demo__menu-item" data-section="demos">Other demos</div>
    <div class="demo__menu-item" data-section="about">About</div>
  </div>
  <div class="demo__section demo__section--home active-section">
    <h2 class="demo__section-heading">Home</h2>
    <p class="demo__description">Just click menu button</p>
  </div>
  <div class="demo__section demo__section--source">
    <h2 class="demo__section-heading">Source of inspiration</h2>
    <p class="demo__description">Based on 
      <a class="demo__link" href="#">this dribbble shot</a> 
      by Gal Shir</p>
  </div>
  <div class="demo__section demo__section--demos">
    <h2 class="demo__section-heading">Other demos</h2>
  </div>
  <div class="demo__section demo__section--about">
    <h2 class="demo__section-heading">About</h2>
  </div>
</div>

js代码：

$(document).ready(function () {
    var $demo = $('.demo');
    var menuTextAT = 500;
    $(document).on('click', '.demo__menu-btn', function () {
        $demo.addClass('menu-active');
    });
    $(document).on('click', '.demo__menu-item', function () {
        var $item = $(this);
        var targetSection = $item.data('section');
        $item.addClass('clicked');
        $demo.removeClass('menu-active');
        $('.demo__section.active-section').removeClass('active-section');
        $('.demo__section--' + targetSection).addClass('active-section');
        setTimeout(function () {
            $item.removeClass('clicked');
        }, menuTextAT);
    });
});

via：http://www.w2bc.com/article/86163