メニューをjqueryで簡単にロールオーバー
メニュー画像にロールオーバーは鉄板ですがDreamWeaverで付けるといろいろ面倒です。
そこでお手元にご用意して頂きたいのが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ですね。
というようなカタチで簡単に実装する事ができるようになるわけです。navigator.js with jqueryのサンプルをみていただければわかるとおり非常にシンプルでHTMLコードもスッキリと見やすくなると思います。もちろんプリロードも付いていますよ。
どうしてもDreamWeaverでロールオーバーを付けるとHTMLが汚くなりがちです。しかも基点表示をするとなると、時にはテンプレを崩さなきゃならないなどいろいろ面倒ですが、このスクリプトで一発解消！ぜひご利用くだされ。
navigator.js with jqueryのダウンロード
- k
- kさんぉおう・・・例の機能美ですね・・・これは流行るのかも・・・いや流行とは起こすものか、これは流行らせても良いかもｗｗｗ
今記事見たばっかなんで（更に超へべれけなんで）導入はしてないんですがcssでbackgroundで設定したものを
このように動かすことは可能ですかね？
かなり素人質問になりますがa:hoverでこのような動きにするというイメージです。
ナビ部分以外でも使えそうな良い動きになりそうでつね。是非使わせて貰います！！
- 宇野
- 宇野さんおお 便利ですね
今までcurrentはcurrentクラスとして指定したもので各ページごとに書き換えてました
これならナビの部分が固定でいけるのですね
- 和田
- 和田さん＞kさま
CSS版はパンピー向けでは無いので自分用に持ってますよっ！IRですね。そっちも将来的に公開しますっ！座標ずらしてロールオーバーだと1枚絵にしなくちゃいけないので、ちょっとわかりづらいかなと思いましてね・・・。
＞宇野さま
ふふ。テンプレから外すのは面倒ですからねぇ。これで基点表示は幾分しやすくなるのではないかなと。
和田憲幸の広告
- BTOパソコン
- www.pc-take.com自作PCやBTOパソコンの事ならシューマイが美味しい神奈川県は横浜のPC-takeにお任せください。
- 事業再生のSTP
- www.s-tp.jp経営が苦しい、そんなときはSTPに経営相談や経営コンサルティングをご依頼ください。
- ドライフラワー卸売り
- www.coretrading.co.jpドライフラワーやプリザーブドフラワーの業務用卸売りならコアトレーディング。
- 通話録音装置 ネイクス
- www.neix.co.jp通話録音装置や通話録音システムのことならネイクス。
- インプラント 東淀川区上新庄
- www.higashi.ne.jp東淀川区上新庄でインプラントや矯正歯科ならひがし歯科で決まり！
- 吉野川 ラフティング
- www.safari-g.com四国は吉野川でラフティングやハイドロスピード、キャニオニングと言えばサファリだよね。
- ホームページ制作 アルバイト
- next-level.bizホームページ制作、Webデザイナーのアルバイト、SOHOのことはネクストレベルまでご相談ください。
- 札幌 美容室 アイウィル
- www.aiwill.jp札幌市中央区で美容師をお探しの際はアイウィルまでお越しください。
- WEBLOGS6.1.0
- www.synck.jpこのブログはシンクテクニカのウェブログでつくられています
- 札幌 ホームページ制作
- www.synck.com札幌でホームページ制作やWebアプリケーション制作ならシンクグラフィカへ。
- iPhoneで内線電話
- www.smartgate.biziPhoneやAndroidから内線電話が無料でかけれる。
- 新潟リフォーム
- www.neohouse.jp新潟で注文住宅とリフォームはネオハウス。
