[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu

ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。

デモのキャプチャ

CSS Swinging Panel Menu

ゆらゆらとした動きはCSS3アニメーションで実装されています。
スクリプトは実装には使用されていません。

HTML

リスト要素を入れ子にしたシンプルな実装です。

<div id="container">
<ul id="menu">
  <li><a href="#">item 1</a>
		<ul>
			<li><a href="#">item 1-1</a></li>
			<li><a href="#">item 1-2</a></li>
			<li><a href="#">item 1-3</a></li>
		</ul>
	</li>
	<li><a href="#">item 2</a>
		<ul>
			<li><a href="#">item 2-1</a></li>
			<li><a href="#">item 2-2</a></li>
			<li><a href="#">item 2-3</a></li>
		</ul>
	</li>
	...
	...
</ul>
</div>

CSS

メニューには画像やスクリプトは一切使用されていません。

sponsors

top of page

©2018 coliss