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

解決済

質問者：KARA256
質問日時：2003/12/16 09:56
回答数：3件

フレームを使ったメニューで、マウスを乗せるとサブメニューが出ると言うスクリプトを探しています。
いくつか見つけることが出来たのですが、メニューの位置が絶対位置指定で直すのが難しく。。。

フレームに画像でメニュー、マウスを乗せるとサブメニューが出て、離すと消える、と。
サブメニューの位置は、マウスの位置によって変わるんではなく、メニューの位置に対してどの位置に表示される、と言うのが望ましいです。メニューからにゅっとサブメニューが現れると言うか…（マウスを乗せるたびにアチコチ変な位置に出るのはうっとおしいかと思うので）
説明が下手で判りづらいかもしれませんが、宜しくお願いします。

IE、ネスケ等にちゃんと対応してくれてるとありがたいです（って言うかぢゃないと困るカモ。。。）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： noname#10926
回答日時：2003/12/16 12:12

階層メニューのことだと思いますが

下記のサンプルに希望のものがあればいいですね。

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2003/12/17 12:22

No.2ベストアンサー

回答者： lead1976
回答日時：2003/12/17 00:27

下記のソースは、先日他の質問に寄せた回答のスクリプトを流用して改造したものですが、このようなスクリプトではいかがでしょうか?

<html>
<head>
<title></title>
<script type="text/javascript"></script>
<style type="text/css"></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

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
まさにコレ！って感じです。

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

よろしくお願いします。

通報する

お礼日時：2003/12/17 12:26

No.3

回答者： lead1976
回答日時：2003/12/18 21:35

返信読みました。

残念ながら、フレーム枠をまたぐ形で何かを表示させるという方法は、私が知る限りでは、用意されていないと思います。
この場合は、フレーム枠をあらかじめ少し大きめに取っておくのが良いのではないかと思います。

色々と考えてみたんですが、これといった妙案も浮かびませんでした…
ご期待に添えない回答で申し訳ありません。