1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」
2010年07月05日-
スポンサード リンク
imagineMenu() jQuery plugin Tutorials Devoth.Design Edinburgh
1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」。
サイトのナビゲーションメニュー等を画像で構築していて、カーソルがあたった際にハイライトさせたいという場合がたまにあります。
onmousemoveなどで画像を切り替える方法もありますが、imagineMenuを使えば、次のような1枚の画像からメニューを構築出来ます。

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

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

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

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]});
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ