• ベストアンサー

マウスオーバーのプルダウンメニューについて

すみません。まったくのしろうとです。教えてください。 会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？ どうかよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.7

サンプルです。 ------------------------------------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> <!-- 　// メニューの表示/非表示の切り替え 　function pdMenu(mName) { 　　// NN4以前(この処理は合っているか分かりません) 　　if((document.layers) && (navigator.appName == "Netscape") && (parseInt(navigator.appVersion) < 5)) { 　　　// <!-- 合っているか不明 　　　if(! document.layers[mName]) return false; 　　　var Menu = document.layers[mName]; 　　　Menu.display = (Menu.display == 'none'?'block':'none'); 　　　return true; 　　　// 合っているか不明 --> 　　// NN6,IE5 　　} else if(document.getElementById) { 　　　if(! document.getElementById(mName)) return false; 　　　var Menu = document.getElementById(mName); 　　// IE4 　　} else if(document.all) { 　　　if(! document.all[mName]) return false; 　　　var Menu = document.all[mName]; 　　} 　　Menu.style.display = (Menu.style.display == 'none'?'block':'none'); 　　return true; 　} // --></script> </head> <body> <div style="cursor:pointer;" onMouseover="pdMenu('Menu1')" onMouseout="pdMenu('Menu1')">大メニュー１ 　<div id="Menu1" style="display:none;"> 　　&nbsp;&nbsp;<a href="" >中メニュー１</a><br> 　　&nbsp;&nbsp;<a href="">中メニュー２</a><br> 　　&nbsp;&nbsp;<a href="" >中メニュー３</a><br> 　</div> </div> <div style="cursor:pointer;" onMouseover="pdMenu('Menu2')" onMouseout="pdMenu('Menu2')">大メニュー２ 　<div id="Menu2" style="display:none;"> 　　&nbsp;&nbsp;<a href="" >中メニュー１</a><br> 　　&nbsp;&nbsp;<a href="">中メニュー２</a><br> 　　&nbsp;&nbsp;<a href="" >中メニュー３</a><br> 　</div> </div> <div style="cursor:pointer;" onMouseover="pdMenu('Menu3')" onMouseout="pdMenu('Menu3')">大メニュー３ 　<div id="Menu3" style="display:none;"> 　　&nbsp;&nbsp;<a href="" >中メニュー１</a><br> 　　&nbsp;&nbsp;<a href="">中メニュー２</a><br> 　　&nbsp;&nbsp;<a href="" >中メニュー３</a><br> 　</div> </div> </body> </html> ------------------------------------------------------ ※見やすくするために全角スペースでインデントしているので 　このままでは動きません。 　全角スペースを半角スペース2個に変換して下さい。 NN4以前の処理については合っているか分かりません＾＾； 間違っているようでしたら直してください。 また、マウスオーバー/アウトでは、次のようなことが起こります。 ------------- 大１ 　中１ 　中２ 大２ 　中１ 　中２ 　中３ 大３ 　中１ ------------- などのように上の大メニューより下の大メニューの中メニューが少ないとき、 大２から大３にマウスを動かすと大３の中メニューが表示されず、 閉じている状態になります。 これはメニューの数の縦幅による違いです。 使い勝手が悪いようでしたらマウスオーバー/アウトでの表示/非表示ではなく、 マウスクリック時の切り替えにしたほうがよいかもしれません。 > <div style="cursor:pointer;" onMouseover="pdMenu('Menu')" onMouseout="pdMenu('Menu')">大メニュー <div style="cursor:pointer;" onClick="pdMenu('Menu')">大メニュー マウスオーバー/アウトで表示/非表示を切り替えるものは一般的に 大メニュー１｜大メニュー２｜大メニュー３｜・・・ といった横メニューが多い気がします＾＾； 大メニュー１ 大メニュー２ 　・ 　・ というものは私が紹介したサイトのようにクリック時の方がいいかもしれませんね。 ただ、これは好みの問題ですので、kaduyoさんが思ったようにすればいいと思います(@＾－＾@)

kaduyo
質問者

お礼

papillon68様 会社からの投稿であるため、土日で間があいてしまい、お返事が遅れました。すみません。 ご多忙にもかかわらず、スクリプトと解説をお書きいただいたのですね。本当に頭が下がります。ありがとうございました。 早速試してみます。

すると、全ての回答が全文表示されます。

その他の回答 (6)

  • Blaise
  • ベストアンサー率33% (13/39)
回答No.6

親メニューを開くと子メニューが出て、子メニューが さらに孫メニューを展開するように、とのことですが、 そうなると、ご提示のスクリプトに書き加えるのはた いへんな作業になります。 なので、ネットから適当な配布用スクリプトを探して みました。中でも、 http://himajin.moo.jp/java/menu2.html などが、解説もありカスタマイズもしやすいと思いま した。試してみてください。HTML部分がリンクなど変 更しやすいです。 元スクリプトでは、親メニューと子メニュー群との間に 空白があって気になるかもしれません（私はイマイチ だと思いましたｗ）が、これを狭めるように修正するに は、最初の<dir>のタグ内に style="margin:5 0 0 30px;" を入れてみてください。パラメータはお好みで。 がんばってｗ

kaduyo
質問者

お礼

Blaise様 会社から投稿させていただいたため、土日で間があいてしまい、お返事が遅れました。すみません。 ご多忙にもかかわらず、お探しいただいたのですね。本当に頭が下がります。ありがとうございました。早速試してみます。 kaduyo

すると、全ての回答が全文表示されます。
回答No.5

> 折りたたみメニューの下には同じような折りたたみ > メニューを入れるつもりなのですが、ポインタがか > ざされるまでは大メニューのすぐ下に表示されるよ > うにしたいと考えています。 > > イメージ（ポインタをかざす前） > > 大メニュー > 大メニュー > 大メニュー > > イメージ（ポインタをかざした後） > > 大メニュー > 中メニュー > 中メニュー > 大メニュー > 大メニュー > > こんな風にするにはどうしたらよいでしょうか？ マウスオーバー/アウト時ではないですが以下のサイトのような イメージでしょうか。 http://www.techscore.com/tech/sql/

kaduyo
質問者

補足

まさに構造はこんな感じです。 そしてカーソルをかざしたときだけ、下の階層の情報が見えるようなしくみです。

すると、全ての回答が全文表示されます。
回答No.4

訂正です。 コピペして変更したので消し忘れがあったようです＾＾； > Menu = document.getElementById(mName).style;= "書きかえ後テキスト"; Menu = document.getElementById(mName).style; Operaへの対応は難しそうですね。 マウスオーバーで表示されるメニューと別に リンクを表示しているものの二つを用意した方が親切かもしれません。 ------------------------------------------------ 　　　大メニュー１｜大メニュー２｜・・・ ------------------------------------------------ 大メニュー１　｜ +小メニュー１｜ +小メニュー２｜ 大メニュー２　｜ +小メニュー１｜ +小メニュー２｜ ------------------------------------------------ のようなイメージです。

kaduyo
質問者

補足

papillon68様 お返事ありがとうございます。 イメージとしては、左フレームに折りたたみメニューを置くレイアウトなのです。本当は小メニューまで表示させるのが親切なのですが、メニュー項目があまりに多いので小メニューにして逃げよう、というのが正直なところです。 ですので、大メニュー1のところにマウスをかざすとその下の小メニューが出るのですが、普段は大メニューのみが縦に並んでいるイメージです。説明が拙くてすみません。 お手すきのときに教えていただければ、幸いです。

すると、全ての回答が全文表示されます。
  • Blaise
  • ベストアンサー率33% (13/39)
回答No.3

初心者の方には、このコードは少し気を衒っていて分かり づらいでしょう。素直にイベントを分けて、 <script language="JavaScript"> function V(){ document.getElementById('Menu1').style.visibility='visible'; } function H(){ document.getElementById('Menu1').style.visibility='hidden'; } </script> <div onmouseover="V()" onmouseout="H()">Touch Me!</div> <div id="Menu1" style="visibility:hidden"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> という風にしたほうがよいと思います。 クロスブラウザの対応ですが、No.2のかたが不明としてい るコードは if (navigator.appName == "Netscape") { if (parseInt(navigator.appVersion) < 5) { if (document.layers[id].visibility == "hide") { document.layers[id].visibility = "show"; } else { document.layers[id].visibility = "hide"; } } } のようになるかと思います。show/hideという点も注意が 必要です。

kaduyo
質問者

補足

Blaise様 早速いただいたスクリプトで試してみました。できました！テキストの部分にプルダウンに対応する言葉を入れていただいたのも、うれしかったです。 ところですみません。補足質問があります。 折りたたみメニューの下には同じような折りたたみメニューを入れるつもりなのですが、ポインタがかざされるまでは大メニューのすぐ下に表示されるようにしたいと考えています。 イメージ（ポインタをかざす前） 大メニュー 大メニュー 大メニュー イメージ（ポインタをかざした後） 大メニュー 　中メニュー 　中メニュー 大メニュー 大メニュー こんな風にするにはどうしたらよいでしょうか？

すると、全ての回答が全文表示されます。
回答No.2

IEの古いバージョン(IE4)やネットエスケープの古いバージョン(NN4) でも正しく動作させようと思うと書き方を換える必要があります。 ----------------------------------------------- // NN6,IE5 if(document.getElementById) { Menu = document.getElementById(mName).style;= "書きかえ後テキスト"; // IE4 } else if(document.all) { Menu = document.all[mName].style; // NN4 } else if(document.layers) { // 書き方が分かりません＾＾； } ----------------------------------------------- また、OperaやFireFoxなど様々なブラウザがあります。 全てに対応させる(全てで同様の動作をさせる)ためには もう少し手を加える必要があるかもしれません。 IE(インターネットエクスプローラ)を利用されているユーザが9割とよく言われますが、 他のものを使われているユーザもいます。 もし、対応していないと大メニューにマウス乗せても 小メニューが出ないということになります＾＾；

kaduyo
質問者

お礼

papillon68様 > IE4やネットスケープへの対応 確かにそうですね。いろいろなブラウザに対応させる必要があると思うのですが、なにせここまでつきとめるのがやっとでそこまでわかりませんでした。 ご多忙にもかかわらず私の質問にお答えいただき、本当にありがとうございました。勉強になりました。

kaduyo
質問者

補足

papillon68様 早速やってみました。すごいです！ 本当にテキストにポインタをかざすとできますね。 ところですみません。補足質問があります。 折りたたみメニューの下には同じような折りたたみメニューを入れるつもりなのですが、ポインタがかざされるまでは大メニューのすぐ下に表示されるようにしたいと考えています。 イメージ（ポインタをかざす前） 大メニュー 大メニュー 大メニュー イメージ（ポインタをかざした後） 大メニュー 　中メニュー 　中メニュー 大メニュー 大メニュー こんな風にするにはどうしたらよいでしょうか？

すると、全ての回答が全文表示されます。
回答No.1

kaduyoさんこんにちは、papillon68と申します。 > <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <span onmouseover="pdMenu('Menu1')" style="cursor:pointer;">大メニュー</span><br> imgタグは画像を扱うためのタグです。 なのでこの部分を変更すればテキストとすることができます。 今回はspanタグとしましたが、他のタグでもかまいません。 > Menu = document.all[mName].style; Menu = document.getElementById(mName).style; allというのは古い書き方で現在ではgetElementByIdというのを使います。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する