純css3圖標菜單下拉收縮特效

基于css3（transition）和css3選擇器(表單)，寫出的動感效果十足的圖標菜單下拉效果，全部使用css3寫的下拉菜單，沒有任何js,當你點擊菜單時，子菜單以動畫形式彈出收縮效果。

使用方法：

1、head引入css文件

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

2、body引入部分

<div class="swanky_wrapper">
	<input id="Dashboard" name="radio" type="radio">
	<label for="Dashboard">
		<img src="images/cp.png">
		<span>儀表盤</span>
		<div class="lil_arrow"></div>
		<div class="bar"></div>
		<div class="swanky_wrapper__content">
			<ul>
				<li>工具</li>
				<li>報告</li>
				<li>分析</li>
				<li>代碼塊</li>
			</ul>
		</div>
	</label>
	<input id="Sales" name="radio" type="radio">
	<label for="Sales">
		<img src="images/del.png">
		<span>銷售</span>
		<div class="lil_arrow"></div>
		<div class="bar"></div>
		<div class="swanky_wrapper__content">
			<ul>
				<li>新品</li>
				<li>過期</li>
				<li>銷售報告</li>
				<li>已售</li>
			</ul>
		</div>
	</label>
	<input id="Messages" name="radio" type="radio">
	<label for="Messages">
		<img src="images/mess.png">
		<span>信息</span>
		<div class="lil_arrow"></div>
		<div class="bar"></div>
		<div class="swanky_wrapper__content">
			<ul>
				<li>收件箱</li>
				<li>發件箱</li>
				<li>發件</li>
				<li>存檔</li>
			</ul>
		</div>
	</label>
	<input id="Users" name="radio" type="radio">
	<label for="Users">
		<img src="images/users.png">
		<span>用戶</span>
		<div class="lil_arrow"></div>
		<div class="bar"></div>
		<div class="swanky_wrapper__content">
			<ul>
				<li>新用戶</li>
				<li>分組</li>
				<li>權限</li>
				<li>密碼</li>
			</ul>
		</div>
	</label>
	<input id="Settings" name="radio" type="radio">
	<label for="Settings">
		<img src="images/set.png">
		<span>設置</span>
		<div class="lil_arrow"></div>
		<div class="swanky_wrapper__content">
			<ul>
				<li>數據庫</li>
				<li>設計</li>
				<li>更改用戶</li>
				<li>退出</li>
			</ul>
		</div>
	</label>
</div>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

267 9692 43