和田憲幸のブログ

そこでお手元にご用意して頂きたいのがjquery.jsと和田が作ったnavigator.js。
metaでこの２つのファイルを読み込むだけで準備はOKです。あとは思い思いのメニューを作りましょう。メニューを作る時は「ファイル名_連番.拡張子」という命名規則だけ守って下さい。ようはファイル名をメニューの連番で保存してくださいという事ですね。例えば「nv_01.gif」だとか「menu_01.gif」だとかそんなのです。

ロールオーバー画像を用意する

ロールオーバーの画像はメニュー画像が「nv_01.gif」の場合、「nv_over_01.gif」とします。PhotoShopのスライスでナビゲータを作るのが前提なのでちょっとややこしいかしら。ようは「_」が「_over_」になるという事ですね。

ロールアウト画像を用意する（任意）

次にロールアウトしたときに最初の画像以外の画像、例えばアニメーションGIFなどを表示したい場合は「nv_out_01.gif」というように「_out_」をつけた画像を用意します。

基点表示用の画像を用意する（任意）

次に現在いるページをメニュー画像に反映したい場合の画像を用意します。こういうちょっとした気配りでユーザビリティはグッと向上するんですよね。画像の命名規則は「_current_」。「nv_current_01.gif」というように用意しましょう。

aタグにクラス名をつける

最後にグローバルメニューのaタグにclassをつければOKですね。

<a href="index.html" class="navigator"><img src="images/nv_01.gif" /></a>

というようなカタチで簡単に実装する事ができるようになるわけです。navigator.js with jqueryのサンプルをみていただければわかるとおり非常にシンプルでHTMLコードもスッキリと見やすくなると思います。もちろんプリロードも付いていますよ。

どうしてもDreamWeaverでロールオーバーを付けるとHTMLが汚くなりがちです。しかも基点表示をするとなると、時にはテンプレを崩さなきゃならないなどいろいろ面倒ですが、このスクリプトで一発解消！ぜひご利用くだされ。

navigator.js with jqueryのダウンロード