卡牌堆叠效果的下拉菜单图标菜单【原创】

页面的head部分，需远程调用font-awesome图标字体库，并引入一个本CSS样式文件，代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，分为两个部分，header标签里面主要是特效说明的内容，紧接着下面的div容器里嵌套了一个div放入菜单全部内容，代码如下：

<header>
  <div class="container">
    <h1>
      <svg id="card_deck" xmlns="http://www.w3.org/2000/svg" viewBox="305.8 100.3 408.8 553.7"><path class="st0" d="M668.6 542h.8l-.8.3-11.9 5.1.4 5.1h17.7l-.5 6.7-5.7 1.6-5.7-1.6-.4-4h-5.1l.7 8 10.5 2.9 10.4-2.9 1.4-15.8h-11.8l12.3-5.4.4-5.1h-25.5l.4 5.1zM535.6 317.8h2.7l-2.7 1.2-40.4 17.3 1.5 17.2h60l-2 22.6-19.1 5.3h-.2l-19.2-5.1-1.3-13.8h-17.3l2.4 27.1 35.4 9.8h.2l35.3-9.8 4.6-53.3h-39.9l41.5-18.5 1.5-17.2h-86.5l1.6 17.2z"/><path class="card_2" d="M691.1 100.3H379.8c-12.9 0-23.4 10.5-23.4 23.4v454.6c0 12.9 10.5 23.4 23.4 23.4h311.3c12.9 0 23.4-10.5 23.4-23.4V123.8c0-12.9-10.5-23.5-23.4-23.5zM386.7 184l3.7-41.5 16.7-4.6 16.6 4.6 3.7 41.6h-40.7zm205.2 229.6l-56.5 15.7-56.4-15.6-12.6-140.9h138l-12.5 140.8zm93.3 156.7l-16.7 4.6-16.6-4.6-3.7-41.6h40.7l-3.7 41.6z"/><path class="st0" d="M407 170.7h-.8l.8-.4 11.9-5-.5-5.1h-17.7l.6-6.7 5.7-1.6 5.7 1.6.4 4h5.1l-.7-8-10.5-2.9-10.5 2.9-1.3 15.8H407l-12.3 5.4-.4 5.1h25.5l-.5-5.1zM373.8 613.8c-15.7 0-28.4-12.8-28.4-28.4V130.8c0-.7 0-1.5.1-2.2-8.6 3.5-14.7 11.9-14.7 21.7v454.6c0 12.9 10.5 23.4 23.4 23.4h311.3c9.8 0 18.2-6.1 21.7-14.6-.7.1-1.4.1-2.1.1H373.8zM348.8 639.5c-15.7 0-28.4-12.8-28.4-28.4V156.5c0-.7 0-1.5.1-2.2-8.6 3.5-14.7 11.9-14.7 21.7v454.6c0 12.9 10.5 23.4 23.4 23.4h311.3c9.8 0 18.2-6.1 21.7-14.6-.7.1-1.4.1-2.1.1H348.8z"/></svg>
      卡牌堆叠效果的下拉菜单图标菜单
    </h1>
    <p>本例中使用了font-awesome图标字体库，可自由增删图标菜单内容，菜单链接可以在a标签的href里面添加，或者在index.js里面设置，整体的自由度还是比较高的。</p>
    <h2><span class="css">CSS3</span> , <span class="js">JS</span> , <span class="heart">♥</span></h2>
  </div>
</header>

<div class="container">
	<div class="card-drop">
		<a class='toggle' href="#">
				<i class='fa fa-qq'></i> 
			  <span class='label-active'>QQ</span>
		</a>
		<ul>
			  <li class='active'>
				    <a data-label="QQ" href="#"><i class='fa fa-qq'></i> QQ</a>
			  </li>
			  <li>
						<a data-label="微信" href="#"><i class='fa fa-wechat'></i> 微信</a>
			  </li>
				<li >
						<a data-label="微博" href="#"><i class='fa fa-weibo'></i> 微博</a>
			  </li>
			  <li>
				    <a data-label="人人" href="#"><i class='fa fa-renren'></i> 人人</a>
			  </li>
		</ul>
	</div>
</div>

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

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>