[CSS]ホバー時にアニメーションでふんわりと浮かぶナビゲーション

JavaScriptを使用せずに、ふんわりと浮かぶエフェクトを使ったナビゲーションを紹介します。

CSS3 Flying Menu
デモページ

[ad#ad-2]

CSS3 Flying Menuのデモ

デモでは他にも、ふんわりと浮かびつつ、ハイライトされるものもあります。

デモページ

CSS3 Flying Menuの実装

HTML:ふんわりと浮かぶタイプ

各アイテム（アイコンとテキスト）をリスト要素で実装します。

<ul id="fly-menu">  
	<li><a href="http://www.webstuffshare.com"><img src="images/heart.png" alt="webstuffshare">Webstuffshare Home</a></li>
	<li><a href="http://feeds.feedburner.com/webstuffsharecom"><img src="images/rss.png" alt="rss"> Subscribe RSS Feed</a></li>
	<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=webstuffsharecom"><img src="images/email.png" alt="email"> Subscribe Email</a></li>
	<li><a href="http://twitter.com/hdytsgt"><img src="images/twitter.png" alt="twitter"> Follow Twitter</a></li>
</ul>

HTML:ふんわり＋ハイライトタイプ

ふんわりだけと比べて、ul要素のid名を変更するだけです。

<ul id="fly-glow-menu">  
	<li><a href="http://www.webstuffshare.com"><img src="images/heart.png" alt="webstuffshare"> Webstuffshare Home</a></li>
	<li><a href="http://feeds.feedburner.com/webstuffsharecom"><img src="images/rss.png" alt="rss"> Subscribe RSS Feed</a></li>
	<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=webstuffsharecom"><img src="images/email.png" alt="email"> Subscribe Email</a></li>
	<li><a href="http://twitter.com/hdytsgt"><img src="images/twitter.png" alt="twitter"> Follow Twitter</a></li>
</ul>

[ad#ad-2]

CSS

「float:left;」でリスト要素を横並びにし、アニメーションを設定しておきます。

.cleaner {
	clear: both;
}

#fly-menu, #fly-glow-menu {
	margin: 1em auto 0 auto;
}

	#fly-menu li, #fly-glow-menu li {

		/* Basic style */
		list-style-type: none;
		margin-right: .5em;
		float: left;
		font-size: 15px;
		background: #cacaca;
		padding: 10px;
		cursor: pointer;

		/* Add shadow */
		-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);

		/*
			Add animation using transition
			-webkit : Safari & Chrome.
			-moz : Firefox
			-o : Opera
		*/
		-webkit-transition: .3s ease-in-out;
  		-moz-transition: .3s ease-in-out;
  		-o-transition: .3s ease-in-out;
	}

CSS:ふんわりと浮かぶエフェクト

ホバー時には上へ浮かぶように、「margin-top:-1em;」を設定します。

#fly-menu li:hover {
	margin-top: -1em;
}

CSS:ふんわり＋ハイライトのエフェクト

ハイライトのエフェクトは、背景色をホワイトにし、box-shadowを加えます。

y-glow-menu li:hover {

	margin-top: -1em;
	background: #fff;

	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}