基于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

在线预览    源码下载