jquery.naviRollover.js の使い方

概要

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

ダンロード

デモ

使い方

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が付与された要素で実行させる場合の例です。

jQuery( function( $ ) {
    $( '#globalNav' ).naviRollOver();
});

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

$('#globalNav').naviRollOver({
    type     : 'html',     // タイプ(html or image)
    keepFlg  : false,       // 見つけても処理続けるか
    tag      : 'ul li a',   // 処理をするhtmlタグを指定
    className: 'cur',       // カレントリンクに付与されるclass名
    firstStrictCheck: true  // 最初の要素を厳密にチェックするか
});

パラメータ

type

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

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

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

<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の場合は「製品概要」と、そのカテゴリに属する「車」「家」のリンクも反転します。

tag

処理をする要素を指定します。a要素以外を指定した場合は、指定した要素以下のa要素を見つけ処理を行います。

className

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

firstStrictCheck

true

true の場合、最初の要素は完全一致のときだけ反転します。以降の要素はリンク先URLが現在表示しているURLを含めば反転します。

false

false の場合、最初の要素もリンク先URLが現在表示しているURLを含めば反転します。