jquery.naviRollover.js デモ

グローバルナビゲーションと、商品紹介のローカルナビゲーションで jquery.naviRollover.js を実行しています。

グローバルナビゲーションの設定

グローバルナビゲーションは標準設定で利用しています。

ローカルナビゲーションの設定

ローカルナビゲーションは孫ページ（白い机等）を表示したときに子ページ（机）も親ページ（商品紹介）も反転させたいので、firstStrictCheck を false にして 最初の要素（商品紹介）が完全一致でない場合（小ページ等を表示した場合）も反転するようにしています。

また、Keepflg を true にして一致するもの全てが反転するようにしています。

通常は指定した要素以下の ul li a に class がつくようになっていますが、今回のローカルナビゲーションは カテゴリ名 が dt a、メニュー項目が dd ul li a となっているので、tag を a として全てのリンクに対してチェックが行われるようにしています。

設定内容は以下の通りです。

jQuery( function( $ ) {
	$( '#globalNav' ).naviRollOver( {
		type: 'html'
	} );
	$( '#localNav' ).naviRollOver( {
		type: 'html',
		tag : 'a',
		keepFlg: true,
		firstStrictCheck: false
	} );

});