mootoolsでエフェクト付きのメニュー『Fancy Navigation』を実装

2008年9月30日

コメント（2）トラックバック（0） Posted by ; k.

mootoolsでエフェクト付きのメニュー『Fancy Navigation』を実装

mootools.jsを使用したFancyなNavigationをご紹介。

その名もFancy Navigation with MooTools Javascriptッ！

グラデーション効果っぽいものがつけられます。

まずはサンプルをご覧ください。←マウスホイールでクリックすると別窓で開きます。

オーバーレイする見せ方のshadowbox.jsの説明はこちら。

それでは詳しいスクリプトの説明を書いていきます。

ちなみに本家はコチラ。

Fancy Navigationの特徴

試してみて感じたFancy Navigationの特徴です。

mootools.js(Ver1.2)と簡単なScriptを書くだけで導入できる。
色の指定だけなので軽い！（多分）
サイトのカラーを選ばない。
マークアップに無理が無く綺麗なHTMLが保てる

などが挙げられます。

特に1番は他のライブラリを読み込む必要が無いので、お手軽です。

逆に少し残念な点もあります。

IE6で動作するがエフェクトが汚い・・・

ここは残念ですが、それでもまぁ綺麗です。
いろいろなブラウザで検証してみてください。

Fancy Navigationの導入方法

導入は物凄い簡単です。

1.mootools.js(Ver1.2)を読み込みScriptを記述する

現在最新のmootools.js（Ver1.2）をheader部分で読み込みます。

<script type="text/javascript" src="moo1.2.js"></script>

それから下記Scriptを記述してあげます。

<script type="text/javascript">
	window.addEvent('domready', function() {
		$each($$('a.nav'),function(el) {
			el.addEvent('mouseenter', function() {
				el.highlight(el.getStyle('background-color'),'#333');
/*マウスオーバー時一cssのactiveの次イベントで呼ばれて来る色（#333）*/
			});
			el.addEvent('mouseleave', function() {
				el.highlight(el.getStyle('background-color'),'#000');
/*マウスが離れた時一この色まで変化していってcssでの指定に戻る（#000）*/
			});	
		});
	});
</script>

2.（X）HTML/CSSを記述する

Scriptの記述が完了したら次にCSSを追加します。

#navi a:hover,#navi a:active {
  color:#000;
  background:#EEE;
  /*マウスオーバー時一番最初の色（#eee）*/
}
#navi .nav {/*Script3行目と同じClass名*/
	background:#000;
	color:#ddd;
	display:block;
	width:180px;
	height:50px;
	line-height:50px;
	padding-left:20px;
}

大事な部分はコメントアウトの箇所ですね。

そして（X）HTMLは

<ul id="navi">
	<li><a href="" class="nav">naviA</a></li>
	<li><a href="" class="nav">Nav Item 2</a></li>
	<li><a href="" class="nav">Nav Item 3</a></li>
	<li><a href="" class="nav">Nav Item 4</a></li>
	<li><a href="" class="nav">Nav Item 5</a></li>
</ul>

とシンプルなマークアップで完成です。