表示しているページが属するカテゴリのメニューを自動的に反転できるjQueryプラグイン

概要

jquery.naviRollover.jsは、ページの属するカテゴリをディレクトリ階層をもとに判別し、自動的にナビゲーションの画像を反転させるjqueryプラグインです。

以前にも同様のものを公開しましたが、jQueryプラグインと言うわりに汎用性に乏しく、いまいち使い勝手が良くなかったので、改良版を公開します。

jquery.naviRollover.jsをダウンロード

使い方

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.naviRollover.js"></script>

次に、どのナビゲーションでnaviRollover.jsを実行させるかを記述します。下記はglobalNavというIDが付与された要素で実行させる場合の例です。

$(function(){
    $('#globalNav').naviRollOver({'root' : '/'});
});

naviRollOver は汎用性を持たせる為に様々な引数を設定できます。下記はデフォルトの設定です。

$('#globalNav').naviRollOver({
    'root' : false ,    // ルートパス
    'type' : 'html' ,    // タイプ(html or image)
    'keepFlg' : false,    // 見つけても処理続けるか
    'globalFlg' : false,    // true : リンクの2階層目のディレクトリで判断, false : リンクの最後のディレクトリで判断
    'tag' : 'ul:first li a',    // 処理をするhtmlタグを指定
    'className' : 'cur'    // カレントリンクに付与されるclass名
});

パラメータ

root

• 必須

トップページのルートパスを指定します。http://xxxx.xxx/がトップページの場合は「/」、http://xxxx.xxx/xxx/がトップページの場合は「/xxx/」を設定します。

type

• 有効値：(文字列) html, image
• 初期値：false

html

反転させるナビゲーションのaタグにclassを付与。付与されるclass名のデフォルトは「cur」。このclass名もオリジナルのものに変更可能（後述）。

<!-- 実行前 -->
<a href="/">ホーム</a>
↓
<!-- 実行後 -->
<a href="/" class="cur">ホーム</a>

image

反転させるナビゲーションのa要素内の画像名が *_n.ext のものを、*_r.ext に置き換えます。例えば、トップページへのリンクが「home_n.gif」という画像の場合、トップページを表示した時は「home_r.gif」という画像に置き換えられます。

<!-- 実行前 -->
<a href="/"><img src="/images/gnav/home_n.gif" alt="ホーム" /></a>
↓
<!-- 実行後 -->
<a href="/"><img src="/images/gnav/home_r.gif" alt="ホーム" /></a>

keepFlg

• 有効値：(真偽値) true, false
• 初期値：false

true

反転させる要素が見つかっても処理を続けます。

false

反転させる要素が見つかったらそこで処理を終了します。

例えば、ナビゲーションが下記のような構造の場合、製品概要 > 車 のページを表示させると

<div id="globalNav">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/product/">製品概要</a>
            <ul>
                <li><a href="/product/car/">車</a></li>
                <li><a href="/product/house/">家</a></li>
            </ul>
        </li>
    </ul>
<!-- end #globalNav --></div>

trueの場合は「製品概要」のリンクだけが反転しますが、falseの場合は「製品概要」と、そのカテゴリに属する「車」「家」のリンクも反転します（もっと正確にいくと、「/product/」の下位全て）。

globalFlg

• 有効値：(真偽値) true, false
• 初期値：false

そのページがどのカテゴリに属しているかはディレクトリを基準に判定していますが、そのときにどのディレクトリを基準とするかを設定するフラグです。

true

リンクの2階層目のディレクトリで判断します。

false

リンクの最後のディレクトリで判断します。

例えば、ナビゲーションが下記のような構造のとき、会社紹介 > スタッフ紹介 のページを開いたとします。

<div id="globalNav">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/product/">製品概要</a>
            <ul>
                <li><a href="/product/car/">車</a></li>
                <li><a href="/product/house/">家</a></li>
            </ul>
        </li>
        <li><a href="/about/introduction/">会社紹介</a>
            <ul>
                <li><a href="/about/ceo/">CEO紹介</a></li>
                <li><a href="/about/staff/">スタッフ紹介</a></li>
            </ul>
        </li>
    </ul>
<!-- end #globalNav --></div>

trueだと2階層目を基準として判定を行うため、スタッフ紹介の基準は「/about/ 」以下かどうかという条件となり「会社紹介」が反転されますが、falseだと最後のディレクトリが基準となるので「/about/staff/」以下かどうかという条件となり、「会社紹介」は反転されません。

親ページと子ページの階層が同列という特殊な場合くらいしかtrueを指定する必要は無いと思います…。

tag

• 有効値：(文字列) htmlパス。必ずa要素を指定すること。
• 初期値：ul:first li a

処理をする要素を指定します。リンク先のURLから階層を判断しているので、必ずa要素を指定するようにしてください。a要素以外を指定した場合は、指定した要素以下のa要素を見つけ処理を行います。

className

• 有効値：(文字列)
• 初期値：cur

typeがhtmlの場合に、リンクに付与されるclass名を指定できます。

最後に

ディレクトリ階層を基準にどのカテゴリに属しているかを判断しているため（ファイル名は無視してディレクトリ名だけで判定しているため）、階層がめちゃめちゃだったり、全てドキュメントルート直下にhtmlファイルが配置してある場合などは正常に動作しませんのでご注意ください。