- ベストアンサー
マウスを乗せるとメニュー表示
フレームを使ったメニューで、マウスを乗せるとサブメニューが出ると言うスクリプトを探しています。 いくつか見つけることが出来たのですが、メニューの位置が絶対位置指定で直すのが難しく。。。 フレームに画像でメニュー、マウスを乗せるとサブメニューが出て、離すと消える、と。 サブメニューの位置は、マウスの位置によって変わるんではなく、メニューの位置に対してどの位置に表示される、と言うのが望ましいです。メニューからにゅっとサブメニューが現れると言うか…（マウスを乗せるたびにアチコチ変な位置に出るのはうっとおしいかと思うので） 説明が下手で判りづらいかもしれませんが、宜しくお願いします。 IE、ネスケ等にちゃんと対応してくれてるとありがたいです（って言うかぢゃないと困るカモ。。。）
- KARA256
- お礼率44% (78/177)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
下記のソースは、先日他の質問に寄せた回答のスクリプトを流用して改造したものですが、このようなスクリプトではいかがでしょうか? <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で、動作を確認してあります。 参考になれば…
その他の回答 (2)
返信読みました。 残念ながら、フレーム枠をまたぐ形で何かを表示させるという方法は、私が知る限りでは、用意されていないと思います。 この場合は、フレーム枠をあらかじめ少し大きめに取っておくのが良いのではないかと思います。 色々と考えてみたんですが、これといった妙案も浮かびませんでした… ご期待に添えない回答で申し訳ありません。
お礼
遅くなりましたがわざわざありがとうございます。
階層メニューのことだと思いますが 下記のサンプルに希望のものがあればいいですね。 http://www02.so-net.ne.jp/~oka/oritatami3c.html 7.Java、DHTML、JavaScript、CSS、XML サンプル 6. DHTML ナビゲ-ション 3.階層メニュー 15.～34.
お礼
ありがとうございます。 イメージに近いものはあったのですが…ページを保存して修正しようとしたら…ページ自体が重すぎて固まってしまいました(^^; 他にもたくさんあったので参考にしてみます。
お礼
ありがとうございます。 まさにコレ！って感じです。 ただ… コレをフレームページで使う時、サブメニューがフレームをまたぐ様にっては出来ないでしょうか？ 親メニューのサイズでフレーム幅を指定したら、サブメニューがスクロールしないと表示されないので。。。 よろしくお願いします。