imagineMenu() jQuery plugin Tutorials Devoth.Design Edinburgh

１枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」。
サイトのナビゲーションメニュー等を画像で構築していて、カーソルがあたった際にハイライトさせたいという場合がたまにあります。
onmousemoveなどで画像を切り替える方法もありますが、imagineMenuを使えば、次のような１枚の画像からメニューを構築出来ます。



カーソルを合わせるとハイライトされるメニューが出来ました。



CSSで色々と修飾できるようになったとはいえ、画像でメニューを構築したほうが自由度は増すので選択する場合もあると思いますが、このプラグインを使うことでハイライトも簡単に実現出来ます。
嬉しい点は、メニューをリストで綺麗に定義できるところ。

<ul id="firstNav">
<li><a href="#home">Home</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

使い方は次のように、imagineMenu メソッドに 画像と、リンクの幅をそれぞれ渡してあげるだけです。

$('#firstNav').imagineMenu({image: 'img/menu.gif', link_widths: [105, 75, 120, 100]});

関連エントリ

• ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集
• ビローンと伸びるドロップダウンメニュー実装jQueryサンプル
• ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」