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

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

デモのキャプチャ

Fancy Navigation with MooTools Javascript
デモ

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

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

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

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

sponsors

top of page

©2018 coliss