[JS]グラデーションのように色が変化するナビゲーション
Post on:2008年9月17日
sponsors
david walsh blogのエントリーから、マウスオーバーに合わせてグラデーションのように背景色が変化するナビゲーションを実装するスクリプトを紹介します。
Fancy Navigation with MooTools Javascript
デモ
ナビゲーションはリスト要素でマークアップされており、ラベル名はテキスト要素なので日本語に変更することも可能です。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
ナビゲーションの各項目は、下記のスタイルシートを使用します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> .nav{background:#000; color:#ddd; display:block; width:200px;} </textarea> |
マウスオーバーでグラデーションに変化するスクリプトは、フレームワークにmootools.jsを使用し、下記のスクリプトを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="js" cols="60" rows="5"> 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'); }); }); }); </textarea> |
コメントに、もう少し短く記述したものもありました。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="js" cols="60" rows="5"> $$(’a.nav’).addEvents({ mouseenter: function(){ $(this).highlight($(this).getStyle(’background-color’),’#333′); }, mouseleave: function(){ $(this).highlight($(this).getStyle(’background-color’),’#000′); } }); </textarea> |
sponsors
