• ベストアンサー

マウスを乗せるとメニュー表示

フレームを使ったメニューで、マウスを乗せるとサブメニューが出ると言うスクリプトを探しています。 いくつか見つけることが出来たのですが、メニューの位置が絶対位置指定で直すのが難しく。。。 フレームに画像でメニュー、マウスを乗せるとサブメニューが出て、離すと消える、と。 サブメニューの位置は、マウスの位置によって変わるんではなく、メニューの位置に対してどの位置に表示される、と言うのが望ましいです。メニューからにゅっとサブメニューが現れると言うか…（マウスを乗せるたびにアチコチ変な位置に出るのはうっとおしいかと思うので） 説明が下手で判りづらいかもしれませんが、宜しくお願いします。 IE、ネスケ等にちゃんと対応してくれてるとありがたいです（って言うかぢゃないと困るカモ。。。）

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

  • ベストアンサー
noname#199778
noname#199778
回答No.2

下記のソースは、先日他の質問に寄せた回答のスクリプトを流用して改造したものですが、このようなスクリプトではいかがでしょうか? <html> <head> <title></title> <script type="text/javascript"><!-- var HD= new Array(); function showdown(tgt){//サブメニューの表示 if (document.getElementById){ tar=document.getElementById(tgt); tar.style.display="block"; } } function hideaway(tgt){// サブメニューからポインタが離れた時の処理 if (document.getElementById){ HD[tgt]=setTimeout('document.getElementById("'+tgt+'").style.display="none"',500); // サブメニューからポインタが離れたら、0.5秒後に隠す } } function keepit(tgt){//ポインタがメニューの上に戻った時の処理 if (HD[tgt]){ clearTimeout(HD[tgt]); // サブメニューを0.5秒後に隠す処理を停止 } } //--></script> <style type="text/css"><!-- td{vertical-align: top; width: 10em;} --></style> </head> <body> <table> <tr> <td onMouseout="hideaway('subm1')" onMouseover="keepit('subm1')"> <a href="#" onMouseover="showdown('subm1')">メニュー1</a> <span id="subm1" style="display: none;"> <a href="#">サブメニュー1-1</a><br> <a href="#">サブメニュー1-2</a> </span> </td> <td onMouseout="hideaway('subm2')" onMouseover="keepit('subm2')"> <a href="#" onMouseover="showdown('subm2')">メニュー2</a> <span id="subm2" style="display: none;"> <a href="#">サブメニュー2-1</a><br> <a href="#">サブメニュー2-2</a> </span> </td> <td onMouseout="hideaway('subm3')" onMouseover="keepit('subm3')"> <a href="#" onMouseover="showdown('subm3')">メニュー3</a> <span id="subm3" style="display: none;"> <a href="#">サブメニュー3-1</a><br> <a href="#">サブメニュー3-2</a> </span> </td> </tr> </table> </body> </html> 一応、テーブルとスタイルシートで表示を整えて、各メニューの下にサブメニューが表示されるような形にしてあります。 リンクの上にポインタが載ったことをトリガーにして、スタイルシートで非表示に設定してある要素(ここではspan要素)を表示させるようにし、またポインタがそのセルの領域から離れた時には一定時間後にサブメニューを隠すようにしてあります。 詳しいスクリプトの内容などについては、参考URLにも説明を載せてありますので、そちらも併せて見ていただけると、わかり良いのではないかと思います。 こちらは、WindowsMe上のIE6とNetscape7.1で、動作を確認してあります。 参考になれば…

参考URL：
http://oshiete1.goo.ne.jp/kotaeru.php3?q=729683
KARA256
質問者

お礼

ありがとうございます。 まさにコレ！って感じです。 ただ… コレをフレームページで使う時、サブメニューがフレームをまたぐ様にっては出来ないでしょうか？ 親メニューのサイズでフレーム幅を指定したら、サブメニューがスクロールしないと表示されないので。。。 よろしくお願いします。

その他の回答 (2)

noname#199778
noname#199778
回答No.3

返信読みました。 残念ながら、フレーム枠をまたぐ形で何かを表示させるという方法は、私が知る限りでは、用意されていないと思います。 この場合は、フレーム枠をあらかじめ少し大きめに取っておくのが良いのではないかと思います。 色々と考えてみたんですが、これといった妙案も浮かびませんでした… ご期待に添えない回答で申し訳ありません。

KARA256
質問者

お礼

遅くなりましたがわざわざありがとうございます。

noname#10926
noname#10926
回答No.1

階層メニューのことだと思いますが 下記のサンプルに希望のものがあればいいですね。 http://www02.so-net.ne.jp/~oka/oritatami3c.html 7.Java、DHTML、JavaScript、CSS、XML　サンプル 　6.　DHTML　ナビゲ-ション 　　3.階層メニュー 　　　15.～34.

参考URL：
http://www02.so-net.ne.jp/~oka/oritatami3c.html
KARA256
質問者

お礼

ありがとうございます。 イメージに近いものはあったのですが…ページを保存して修正しようとしたら…ページ自体が重すぎて固まってしまいました(^^; 他にもたくさんあったので参考にしてみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • マウスオーバーで伸びるサブメニューが正しく動作しません

    こんばんは。 以下サイトのメインメニューの左三つのボタンのように、 ボタンをマウスオーバーするとボタンの上にサブメニューが上がり、 サブメニューにあるテキストがそれぞれボタンになっているという仕組みを作ろうとしています。 http://www.mizkan.co.jp/index_1.html ・マウスオーバー addEventListenerのMOUSE_OVERでボタンの上にカーソルが乗ると、 gotoAndPlayでサブメニューが上がるアニメーションのフレーム番号に飛ぶ。 ・マウスアウト addEventListenerのMOUSE_OUTでボタンからカーソルを外すと、 gotoAndPlayでサブメニューが下がるアニメーションのフレーム番号に飛ぶ。 上記のscriptを作るところまでは上手くいきました。 しかしマウスオーバー時に伸びているサブメニューにマウスカーソルを乗せると、 マウスオーバーとマウスアウトのアクションが繰り返し実行され、 サブメニューが上がったり下がったりのアニメーションを繰り返してしまいます。 この動きは、おそらく、サブメニュー部分の領域が一瞬ボタンではないと認識され、マウスアウトのアニメーションが動きだすが、やはりボタンとして認識されマウスオーバーのアニメーションが動き出す。という動きがループしてしまっているのではないかと思われますが、解決方法が見つかりませんでした。 上に記載した方法以外でも同じような動きになる作り方があればご教授ください。 宜しくお願い致します。

  • menuの表示

    質問です。 以下の例１のような左右に分かれたページで、「サービスガイド」をクリックすると、その下のメニューが下に移動して、その間にサブメニューが表示され、さらにマウスが移動したら、そのサブメニューが閉じて、元に戻るようなスクリプトを探しています。そのようなスクリプトってないでしょうか？ ご存知の方、よろしくお願いいたします。 例１　http://www.starcat.ne.jp/mediacat/

  • FLASHで、メニューボタンクリック→サブメニュー開く、再びクリック→サブメニュー閉じる、と設定する方法は?

    タイトルの通りですが、 メニューボタンを・・・ クリック→サブメニュー開く 再びクリック→サブメニュー閉じる ・・・とするには、 どのようなアクションスクリプトを設定すればよいのでしょうか？ あらかじめ、タイムライン上のフレームに サブメニューが開くモーションを作成し、 メニューボタンのアクションに on(release){gotoAndPlay(*);} *はサブメニューを開きはじめるフレームを指定 を設定したものの、 そこから先がわからず行き詰っています・・・ アドバイスよろしくお願いいたします<(_ _)>

  • Flashでプルダウンメニューを

    1.メニューにマウスが通過した際、サブメニューが表示される 2.メニュー・サブメニューからマウスが離れるとサブメニューが隠れる といったプルダウンメニューを作成したいのですが、 下記の方法だと一度現れたサブメニューが隠れて（元に戻って）くれません。 3フレーム目に何かアクションを入れなければいけないのかと思うのですが・・・ ■1フレーム目 ボタンシンボル（メインメニュー）に下記アクション ------------------------------------- on (rollOver) { gotoAndStop(2); } ------------------------------------- アクションレイヤー ------------------------------------- stop(); ------------------------------------- ■2フレーム目 メインメニューとサブメニュー（メインメニューにロールオーバーした際に出てくるメニュー）を 配置 サブメニューに下記オブジェクトアクションを挿入 ------------------------------------- on (press) { getURL("http://www.●●●.com"); } ------------------------------------- アドバイスいただけると助かります。どうぞお願い致します。

    • ベストアンサー
    • Flash
  • フレームをまたいでサブメニューを表示（JavaScriptで）

    http://www.milonic.com/menu/frames/ のようなことがしてみたいのですが、どのようにしたらいいのでしょうか？ また、JavaScriptで、（ａ）という画像にマウスオーバーしたら（ｂ）という画像を動かす、ということができますが、このとき画像は、cssを使って位置指定で行いますよね？ 元の（ｂ）という画像を<img>で書くときも stype="position:… と指定しておかないとダメみたいですが、この指定をしない方法なんてあるのでしょうか？ それと（Ａ）という画像にマウスーオーバーしたら、今まで表示されていなかった（Ｂ）という画像を、指定の位置に表示、ということをするにはどうしたらいいのでしょうか？ 質問が多くなってしまいましたが、どれかひとつでも答えていただければ幸いです。 よろしくお願いいたします。

  • マウスオーバーの合体

    マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <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="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑

  • フレームページのメニューボタン

    いくつか同じような質問がありましたが、スクリプトでの解決方法がみつかりませんでしたので質問させてもらいます 今フレームを使ったHPを作っています フレームは上下で分割してあり、上のフレームにはFLASHをつかったメニューボタンを入れあり、ボタンを押すことで下のフレームに各ページを表示させます メニューボタンはマウスが乗ると色が変わるボタンなんですけど 下のフレームに表示してあるページと対応したボタンが常にonの状態になるようなFLASHメニューにしたいんですけどスクリプトをどう記述したらいいかわかりません だれか教えていただけないでしょうか？ ちなみにFLASHソフトはフリーソフトSUZUKAを使っています

  • メニューが正しく表示されなくなりました

    Windows Vista Home Premium SP2　を使用しています。 先日IE７から誤ってIE８をインストールしてしまい、直ちにアンインストールをして ７に戻したのですが、それ以来、メニューバーおよびコンテキストメニュー(マウス 右ボタン）が正しく表示されなくなりました。 マウスクリックした時点では、底辺と右辺に影のみが表示されるだけで、内容が 表示されません。（画像参照） その後、カーソルを見えていないメニュー内に移動させるとカーソルの通過した エリアまでのメニューが表示されていきます。 IE８をアンインストールする以前は、正常に表示されており、現象が発生した前後 にソフトウエア等のインストール、アンインストールはIE以外心当たりがありません。 正しく表示させるためにはどうすればいいでしょうか？ 解決策をご教授ください。

  • 複数の画像にメニュー表示させたい

    説明が下手で申し訳ないです。 現在hpのリメイクをしています、以前はテーブルでレイアウトを組んでselectタグで画像上部にプルダウンを設置していました。 （※画像参照） 今は、 ・上にプルダウンメニュー ・下に画像 のように分かれていますが、これを一つの画像として作成して 画像のある部分をマウスクリックすると、メニュー表示されるようにしたいです。 当初考えていた二つに分けて設置だと、場所の指定や書くコードが多すぎるのかと思い 一つの画像として扱おうと変更しました。

  • IEのお気に入りのメニューバーでサブメニューが

    IEのお気に入りのメニューバーでサブメニューが開かない時があります。 添付画像の赤丸のような状態になって、サブメニューが開きません。 こうなった場合このIEを終了させるしかないのですが、 この状態はなんなのでしょう？ OSはWindows7 sp1 IE9ですが、結構昔のIEからこの現象発生します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する