メニューの画像を切り替えるjqueryプラグイン

  • 投稿日
  • 更新日
  • 著者 キタジマタカシ
  • カテゴリー jQuery

概要

自分が今みているカテゴリを判別し、自動的にナビゲーションの画像を反転させるjqueryプラグインです。各カテゴリごとに、そのカテゴリに応じたナビゲーションのメニューを反転させる場合が多いと思いますが、手動で各ページごとにclass振ったりするの手間ですよね。そこでnavi_rolloverの登場！

使い方

jqueryとnavi_rolloverをダウンロードし、head要素内に読み込みます。

1
2
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_rollover.js"></script>

ナビゲーションを記述します。
ここで、いくつか守らないと行けないルールがありますのでご注意ください。
※ロールオーバー前の画像を「画像名_n.hoge」、ロールオーバー画像を「画像名_r.hoge」とます。
※リンク先URLは「/」もしくは「/ファイル名」。
※各ページはトップページ以下のディレクトリに設置。
※トップページ直下のディレクトリ名に反応します。

1
2
3
4
5
6
7
8
<div id="GlobalNavigation">
  <ul>
    <li><a href="/"><img src="images/common/gnav/top_n.gif" alt="" /></a></li>
    <li><a href="about/"><img src="images/common/gnav/about_n.gif" alt="" /></a></li>
    <li><a href="blog/"><img src="images/common/gnav/blog_n.gif" alt="" /></a></li>
    <li><a href="contact/"><img src="images/common/gnav/contact_n.gif" alt="" /></a></li>
  </ul>
<!-- end #GlobalNavigation --></div>

サイト構造にあわせてnavi_rollover.jsを書き直します。

1
2
3
4
5
6
7
//トップページURL
var $topurl='/';
//ルートディレクトリを指定します。トップページがhttp://hogehoge.com/hoge/だったら、「/hoge/」
 
// #GlobalNavigationに含まれるリンクを取得
var $navArr = $('#GlobalNavigation ul li a:has(img)');
//#GlobalNavigation ul liの部分を適宜変更してください。

追記　2011.06.07

プラグインと言いつつソース直に編集しないといけないし、汎用性がいまいちなので、修正版を近々アップする予定です。

  • Feedly
  • -
    フィード

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

記事一覧