[JS]グラデーションのように色が変化するナビゲーション

david walsh blogのエントリーから、マウスオーバーに合わせてグラデーションのように背景色が変化するナビゲーションを実装するスクリプトを紹介します。

Fancy Navigation with MooTools Javascript
デモ

ナビゲーションはリスト要素でマークアップされており、ラベル名はテキスト要素なので日本語に変更することも可能です。

<ul>
<li><a href="#" class="nav">Nav Item 1</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>

ナビゲーションの各項目は、下記のスタイルシートを使用します。

.nav{background:#000; color:#ddd; display:block; width:200px;}

マウスオーバーでグラデーションに変化するスクリプトは、フレームワークにmootools.jsを使用し、下記のスクリプトを使用します。

window.addEvent('domready', function() {
	$each($$('a.nav'),function(el) {
		el.addEvent('mouseenter', function() {
			el.highlight(el.getStyle('background-color'),'#333');
		});
		el.addEvent('mouseleave', function() {
			el.highlight(el.getStyle('background-color'),'#000');
		});
	});
});

コメントに、もう少し短く記述したものもありました。

$$(’a.nav’).addEvents({
mouseenter: function(){
$(this).highlight($(this).getStyle(’background-color’),’#333′);
},
mouseleave: function(){
$(this).highlight($(this).getStyle(’background-color’),’#000′);
}
});

Post on:2008年9月17日