メニューにマウスオーバーすると、背景画像と文字色がフェードで切り変わるメニュー「Color Fading Menu」のご紹介記事です。

Color Fading Menu with jQuery
デモ

COoooooooooooooooOL!!!かっこよいですね！ （私は最初見たとき「FLASH！」と思ってしまいました。。。いやはや凄い時代になったものです。）

このメニューの面白いところは、マウスオーバーして背景画像と文字色を同時にフェードで切り替えているところです。もちろんスタイルシートでマウスオーバーで背景画像と文字色を変えるという設定は出来るのですが、「徐々に変える」という処理は出来ません。なので、jQueryに「徐々に（フェードして）変える」という処理をやらせて、この面白い効果を実現しています。

さて、例によって私がこのスクリプトを使用したサンプルを作ってみました！

サンプル

う～～～ん・・・微妙ですね！
ええと、言い訳です。いろいろと試したのですが、英語のフォントだとかっこ良く出来ても、日本のフォントだと、び・・微妙になるケースにはまってしまいました。皆様はこんな経験ありませんか。いやーデザインって本当に奥が深いですね！（でも楽しい。）笑

このメニュー（サンプル）の実装方法を以下に記述します。

1.　Color Fading Menu with jQueryより、ファイル一式をダウンロードする。（ページ中の「DowuloadFIles」というリンクより）

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-color.js"></script>
<script type="text/javascript" src="main.js"></script>

※main.jsで、マウスオーバーした際のフェード処理等を実行します。

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

<div id="pageWrap">
  <div id="pageBody">
     <a class="hoverBtn" href="#">ホーム</a>
     <a class="hoverBtn" href="#">会社概要</a>
     <a class="hoverBtn" href="#">製品情報</a>
     <a class="hoverBtn" href="#">お問い合わせ</a>
     <div class="clear"></div>
  </div>
</div>

4.　メニュー部分のCSS(スタイルシート)を記述する。（本家のサンプルのように外部CSSファイルで読み込んでもOKです。）

#pageWrap {
	width: 560px;
	background-color: transparent;
	margin: 25px 0;
}

#pageBody {
	width: 100%;
}

div.hoverBtn {
	position: relative;
	float: left;
	background: #000 url(images/navBG2.png) repeat-x 0 0 scroll;
	font-size: 13px;
}
div.hoverBtn a {
	position: relative;
	z-index: 2;
	display: block;
	width: 140px !important;
	width: 139px; /* for only IE6 style */
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: transparent none repeat-x 0 0 scroll;
	border-left: 1px solid #999;
}
div.hoverBtn div {
	display: none;
	position: absolute;
	z-index: 1;
	top: 0px;
	background: #000 url(images/navHover4.png) repeat-x 0 0 scroll;
}

以上です。
上記の要領で設定してあげれば動作すると思います。

さて、このメニューの肝である「マウスオーバーでフェードで切り替わる背景画像や文字色」はどこをどういじればカスタマイズ出来るのでしょうか。次は「カスタマイズの方法」そこに着目していきます。

■マウスオーバーしない状態（初期）の設定。（スタイルシート）
スタイルシートの以下の部分でカスタマイズします。

div.hoverBtn {
	position: relative;
	float: left;
	background: #000 url(images/navBG2.png) repeat-x 0 0 scroll;
	font-size: 13px;
}
div.hoverBtn a {
	position: relative;
	z-index: 2;
	display: block;
	width: 140px !important;
	width: 139px; /* for only IE6 style */
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: transparent none repeat-x 0 0 scroll;
	border-left: 1px solid #999;
}

・背景（画像）の指定： 上記スタイルシートの4行目の「background: #000 url(images/navBG2.png) repeat-x 0 0 scroll;」の部分で指定します。
・文字色の指定： 上記スタイルシートの17行目の「color: #fff;」の部分で指定します。

■マウスオーバーした状態の設定。（スタイルシート,javascript(「main.js」ファイル)）
スタイルシートの以下の部分でカスタマイズします。

div.hoverBtn div {
	display: none;
	position: absolute;
	z-index: 1;
	top: 0px;
	background: #000 url(images/navHover4.png) repeat-x 0 0 scroll;
}

javascript(「main.js」ファイル)の以下の部分でカスタマイズします。

var hoverColour = "#62CBF7";

・背景（画像）の指定： 上記スタイルシートの6行目の「background: #000 url(images/navHover4.png) repeat-x 0 0 scroll;」の部分で指定します。
・文字色の指定： javascript(「main.js」ファイル)の1行目の「var hoverColour = “#62CBF7″;」の部分で指定します。

以上2つの設定ポイントを抑えておけば、切り替わる背景画像と文字色を自由にカスタマイズ可能です。是非是非お試し下さいませ！

以下、今回の記事作成する際に参考にさせて頂いたサイトです。
マウスオーバーをデザインする | DesignWalker
Movable Type 備忘録 - Color Fading Menu with jQuery
ありがとうございます！

以上、[jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menuでした！

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

• [jQuery]3階層以上のドロップダウンメニューを表示する「droppy」！
• [jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！
• [jQuery]マウスオーバーした画像にフェードイン・フェードアウト（透明度）する効果を！夏
• スムーズなアコーディオンメニュー！
• jQueryを使用してボックスを上下左右中央に配置する