とってもキュートな水平メニュー「Fancy Navigation withCSS & jQuery」をご紹介致します。

段々と秋の気配を感じる今日この頃です。皆様いかがお過ごしでしょうか。季節の変わり目なので風邪などひかれないようご自愛下さいね。

さて以下、本家のサンプルメニューとなります。とても可愛いですよ。

Animated Navigation with CSS & jQuery

デモ

Very Cute! Pretty! あ～んど　Fancy!（久しぶりのsohtanakaさんのサイトネタで興奮気味）笑
とっても動きがかわいいですね。メニューをマウスオーバーすると、色違いの文字と背景のブロックが下から「みょん！」と出てきます。マウスを左右に動かしてみると、まるで波打っているような効果が見えますね。とても面白いです。さらに続けているとなんとなく上下回転しているように見えませんか。なんというトリック・・・！びっくり・・・です！

私もこのキュートなメニューのサンプルを作ってみました。

サンプル（1）

どうですかな！？か・・・かわいいですか？え？・・・駄目ですか。。そうですかそうですか。。。うわ～ん！！（涙）

さて（笑）気を取り直しまして、このサンプルの実装方法を以下に記述いたしますね。

1.　Animated Navigation with CSS & jQueryより、「jquery-1.3.2.min.js」ファイルをダウンロードする。（「Step 3. Animation – jQuery」のところにリンクがあります。）

2.　head内に以下のjsファイルへのリンクを記述する。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

3.　メニュー部分のHTMLを記述する。

<ul id="topnav" class="v2">
	<li><a href="#">Home</a></li>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">製品情報</a></li>
	<li><a href="#">リクルート</a></li>
	<li><a href="#">お問い合わせ</a></li>
</ul>

4.　メニュー部分のCSS(スタイルシート)を記述する。

ul#topnav {
	margin: 10px 0 20px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	clear: both;
	float: left;
	width: 650px;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	height:40px;

}
ul#topnav a, ul#topnav span {
	padding: 10px 17px;
	float: left;
	text-decoration: none;
	color: #fff;
	clear: both;
	height: 20px;
	line-height: 20px;
	background: #1d1d1d;
}
ul#topnav a {	color: #7bc441; }
ul#topnav span {
	display: none;
}

ul#topnav.v2 span{
	background: url(a_bg.png) repeat-x left top;
}
ul#topnav.v2 a{
	color: #222;
	background: url(a_bg.png) repeat-x left bottom;
}

4.　jQueryのコードを記述する。

$(document).ready(function() {
	$("#topnav li").prepend("<span></span>"); //空のspanタグをリスト要素の先頭に挿入する

	$("#topnav li").each(function() { //リスト要素内の
		var linkText = $(this).find("a").html(); //aタグ内のテキストを変数linkTextに代入
		$(this).find("span").show().html(linkText); //変数linkTextに代入したテキストをSpanタグ内に追加
	}); 

	$("#topnav li").hover(function() {	//マウスオーバー時の処理
		$(this).find("span").stop().animate({
			marginTop: "-40" //spanタグを40ピクセル上に移動する
		}, 250);
	} , function() { //マウスアウト時の処理
		$(this).find("span").stop().animate({
			marginTop: "0" //元の状態（ 0px ）にspanを移動
		}, 250);
	});
});

以上です。（より詳しいソースははサンプルをご覧下さい。）

メニューが階層構造になっているので拡張性も優れていて、メンテナンスもしやすいのが良いですね！（見た目もソースも優しいのん。）
もちろん、カスタマイズ面でもスタイルシートの

ul#topnav.v2 span{
	background: url(a_bg.png) repeat-x left top;
}
ul#topnav.v2 a{
	color: #222;
	background: url(a_bg.png) repeat-x left bottom;
}

この部分の背景画像を作れば(a_bg.png)、自分の好きな背景画像を指定出来ます。

という訳で調子にのって、もう１パターン作ってみました！！
サンプル（2）

もしかしたらこちらの方が実用的かもしれませんね。シンプルで良いかもかも。
本当に簡単な設定で実装出来てしまうので、キュートなサイトに、又、びっくりどっきりな仕掛けが欲しいサイト等など、是非取り入れてみてはいかがでしょうか。

以上、[jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！のご紹介でした！

こちらもあわせてどうぞ！

• [jQuery]3階層以上のドロップダウンメニューを表示する「droppy」！
• [jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu
• jQueryを使用してボックスを上下左右中央に配置する
• CSSで作るセクシーなメニュー！
• [CSS]夏だ！海だ！さわやかなデザインを実現するbackground-attachment: fixed;！