[CSS]アニメーションで細かい動きを加えたカード状のドロップダウンのデモがかなりかっこいい

ドロップダウンが展開する際のアニメーションがかなりかっこいいのでご紹介。

上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。
最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。

実際の動きは、下記ページでご覧ください。

CSS3 Card Deck Drop Down

HTML

各アイテムはリスト要素でシンプルな実装です。

<div class="card-drop">
	<a class='toggle' href="#">
		<i class='icon-suitcase'></i> 
		<span class='label-active'>Everyting</span>
	</a>
	<ul>
		<li class='active'><a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Everyting</a></li>
		<li><a data-label="Design" href="#"><i class='icon-magic'></i> Design</a></li>
		<li ><a data-label="UI-UX" href="#"><i class='icon-bolt'></i> UI-UX</a></li>
		<li><a data-label="Print" href="#"><i class='icon-tint'></i> Print</a></li>
		<li><a data-label="Photography" href="#"><i class='icon-camera-retro'></i> Phtography</a></li>
	</ul>
</div>

CSSとJavaScriptはちょっと長いので、下記ページをご覧ください。

• Edit mode -CSS3 Card Deck Drop Down