TAGS: 画像 | イメージ | メニュー | jQuery | プラグイン
imagineMenuは、メニューにマウスを乗せると、画像を他の画像に入れ替える効果をJavaScriptで実装するjQueryプラグインです。

言語:JavaScript(jQuery)


使い方


1)画像を用意
 例:


2)HTMLコード

<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>


3)JavaScriptコード
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.imagineMenu-1.0.js"></script>

<script type="text/javascript" charset="utf-8"> $(function () {   $('#firstNav').imagineMenu({image: 'img/menu.gif', link_widths: 100}); }); </script>


image属性に画像のパスを指定します。
link_widths属性に、メニューアイテムの幅を指定します。

表示例:


それぞれのメニューアイテムの幅は違う場合、個々の指定もできます。
$(function () {
  $('#secondNav').imagineMenu({image: 'img/menu.gif', link_widths: [105, 75, 120, 100]});
}); 


表示例


また、予めメニューアイテムを選択状態にすることもできます。
$(function () {
  $('#thirdNav').imagineMenu({image: 'img/menu.gif', link_widths: [105, 75, 120, 100], selected: 'home'});
}); 

.

Sponsored Link


著者について
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

コメント

ユーザ名 (required)

Eメール (will not be published) (required)

Webサイト

記事への評価