和田憲幸のブログ

札幌市南区在住、個人事業のWebエンジニア 和田憲幸(40歳)のブログです。

メニューをjqueryで簡単にロールオーバー

メニュー画像にロールオーバーは鉄板ですがDreamWeaverで付けるといろいろ面倒です。

2009-10-12 01:50:44
入力時間 / 11:28

そこでお手元にご用意して頂きたいのがjquery.jsと和田が作ったnavigator.js
metaでこの2つのファイルを読み込むだけで準備は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のダウンロード

TAG

P.384

kさん
ぉおう・・・例の機能美ですね・・・これは流行るのかも・・・いや流行とは起こすものか、これは流行らせても良いかもwww
今記事見たばっかなんで(更に超へべれけなんで)導入はしてないんですがcssでbackgroundで設定したものを
このように動かすことは可能ですかね?

かなり素人質問になりますがa:hoverでこのような動きにするというイメージです。
ナビ部分以外でも使えそうな良い動きになりそうでつね。是非使わせて貰います!!2009-10-12 05:15:26
宇野さん
おお  便利ですね
今までcurrentはcurrentクラスとして指定したもので各ページごとに書き換えてました
これならナビの部分が固定でいけるのですね2009-10-12 08:01:30
和田
>kさま
CSS版はパンピー向けでは無いので自分用に持ってますよっ!IRですね。そっちも将来的に公開しますっ!座標ずらしてロールオーバーだと1枚絵にしなくちゃいけないので、ちょっとわかりづらいかなと思いましてね・・・。

>宇野さま
ふふ。テンプレから外すのは面倒ですからねぇ。これで基点表示は幾分しやすくなるのではないかなと。2009-10-15 04:14:59