个性化的下拉菜单动画

一款个性化的下拉菜单动画，点击页面的图标菜单，会展开菜单下面的二级菜单，点击叉号可使二级菜单收缩，整体动画还是比较流畅的，喜欢的童鞋请收下吧。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 10 积分

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，div容器里放入了另一个div和ul标签，代码如下：

<div class="m-dropdown">
	<div class="e-button open">
		吸引力法则
		<div class="e-burger">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<ul class="e-list">
		<li><a href="#">要求</a></li>
		<li><a href="#">信念</a></li>
		<li><a href="#">接受</a></li>
		<li><a href="#">实现</a></li>
		<li><a href="#">循环</a></li>
	</ul>
</div>

页面的底部，需远程调用jQuery库和图标字体库的JS文件，并引入本地JS文件，代码如下：

<script src='https://code.jquery.com/jquery-3.2.1.js'></script>
<script src='https://use.fontawesome.com/b5bf1bd49e.js'></script>
<script type="text/javascript" src="js/index.js"></script>