フレームを使ったメニューで、マウスを乗せるとサブメニューが出ると言うスクリプトを探しています。
いくつか見つけることが出来たのですが、メニューの位置が絶対位置指定で直すのが難しく。。。
フレームに画像でメニュー、マウスを乗せるとサブメニューが出て、離すと消える、と。
サブメニューの位置は、マウスの位置によって変わるんではなく、メニューの位置に対してどの位置に表示される、と言うのが望ましいです。メニューからにゅっとサブメニューが現れると言うか…(マウスを乗せるたびにアチコチ変な位置に出るのはうっとおしいかと思うので)
説明が下手で判りづらいかもしれませんが、宜しくお願いします。
IE、ネスケ等にちゃんと対応してくれてるとありがたいです(って言うかぢゃないと困るカモ。。。)
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
ありがとうございます。
まさにコレ!って感じです。
ただ…
コレをフレームページで使う時、サブメニューがフレームをまたぐ様にっては出来ないでしょうか?
親メニューのサイズでフレーム幅を指定したら、サブメニューがスクロールしないと表示されないので。。。
よろしくお願いします。
No.3
- 回答日時:
返信読みました。
残念ながら、フレーム枠をまたぐ形で何かを表示させるという方法は、私が知る限りでは、用意されていないと思います。
この場合は、フレーム枠をあらかじめ少し大きめに取っておくのが良いのではないかと思います。
色々と考えてみたんですが、これといった妙案も浮かびませんでした…
ご期待に添えない回答で申し訳ありません。
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
ありがとうございます。
イメージに近いものはあったのですが…ページを保存して修正しようとしたら…ページ自体が重すぎて固まってしまいました(^^;
他にもたくさんあったので参考にしてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Visual Basic(VBA) VBA 画面上のカーソルに文字数字を入力するコードを教えて下さい 1 2022/10/30 10:31
- ノートパソコン Onlineエクセルで右クリックが使えない 1 2023/07/01 22:07
- 眼・耳鼻咽喉の病気 白内障手術で単焦点レンズを入れた方 術後の見え方を教えて下さい 1 2023/01/17 01:53
- Android(アンドロイド) スマートフォンを盗まれた場合に備えて 3 2023/07/15 15:14
- Excel(エクセル) エクセルからビジオのリンク貼り付け 1 2023/03/30 17:51
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- C言語・C++・C# ディスプレイの解像度とマウスの位置について 2 2023/05/21 19:01
- 飲食店・レストラン 飲食店関係者の方に質問 先日食事をした店内での出来事です。 頼んだ物がまだあるのにも関わらず、店員さ 6 2022/09/23 22:34
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
動的にHTMLコンテンツを吹き出...
-
HTMLタグに複数のクラスを設定...
-
読み込んだQRコードをフォーム...
-
テキストエリア内の一部の文字...
-
Apend前のElementの中のElement
-
removeEventListenerについて
-
getElementByIdの戻り値がnull...
-
Fire Foxでロールオー...
-
検索結果を別フレームに表示したい
-
onclickとonmouseoverを同時に...
-
JavaScriptで、リンクのターゲ...
-
Event.observeで、入れ子divタ...
-
removeAttribute()メソッドで削...
-
javascriptによるスクロールを...
-
jQuery の jqPlotプラグイン
-
クリックで色変更後に既に変更...
-
innerHTMLを使い、書き換えたい
-
変数名をどのようにつけるのが...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
iframe内のリンクが飛ばないの...
-
[急ぎ] videoタグで埋め込んだm...
-
背景色を透明化
-
console.log結果をhtmlで表示し...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
removeAttribute()メソッドで削...
-
テキストエリア内の一部の文字...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数内容をHTML内で表示する方法
-
HTMLタグに複数のクラスを設定...
-
jQueryのアコーディオンメニュ...
-
取得した要素がインライン要素...
おすすめ情報