menuの表示

解決済

質問者：ironika
質問日時：2003/12/14 00:48
回答数：2件

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

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： lead1976
回答日時：2003/12/14 12:54

ちょっと作ってみました。

こういうものでは、いかがでしょうか。

<html>
<head>
<title></title>
<script type="text/javascript"></script>
</head>
<body>
<div>
<p onMouseout="hideaway('subm1')" onMouseover="keepit('subm1')">
<a href="#" onClick="showdown('subm1'); return false;">メニュー1</a>
<span id="subm1" style="display: none;">
<a href="#">サブメニュー1-1</a><br>
<a href="#">サブメニュー1-2</a>
</span>
</p>
<p onMouseout="hideaway('subm2')" onMouseover="keepit('subm2')">
<a href="#" onClick="showdown('subm2'); return false;">メニュー2</a>
<span id="subm2" style="display: none;">
<a href="#">サブメニュー2-1</a><br>
<a href="#">サブメニュー2-2</a>
</span>
</p>
<p onMouseout="hideaway('subm3')" onMouseover="keepit('subm3')">
<a href="#" onClick="showdown('subm3'); return false;">メニュー3</a>
<span id="subm3" style="display: none;">
<a href="#">サブメニュー3-1</a><br>
<a href="#">サブメニュー3-2</a>
</span>
</p>
</div>

</body>
</html>

サブメニューについては、ここではspan要素に入れて、それをdisplay:none;で隠してあります。この要素には、必ずidを設定する必要があります。
メニューの方は、a要素でクリックするとサブメニューを表示させるようにしてあります。
これらのメニューをまとめてp要素に入れて、このp要素からマウスが離れたら、サブメニューが2秒後に隠れるように仕掛け、またこのp要素の上にポインタが戻ってきた時にはサブメニューを隠す処理を破棄するようにしてあります。

スクリプトにも説明を入れましたが、それぞれの関数は、
「showdown('表示するspan要素のID')」：指定のサブメニューを表示させる
「hideaway('隠すspan要素のID')」：指定のサブメニューを隠す
「keepit('表示させ続けるspan要素のID')」：指定のサブメニューを隠す処理を破棄する
このような処理をまとめてあります。

この他の点については、JavaScriptの解説書や解説サイトなどで確認してみてください。
とりあえず、WinMe上のIE6、Netscape7.1で動作を確認してあります。 Netscape4.xx以前などでは動作しないかもしれません。

参考になれば幸いです。

この回答への補足

早速の解答ありがとうございます。
もしよろしければ、追加で教えていただきたいのですが、このスクリプトのリンクの部分は、画像に変更しても問題なく動作しますでしょうか？通常通り<img src= ・・・・・・>のタグを挿入すればOKですか？もし、何らかのスクリプトが必要ならば、教えてください。よろしくお願いいたします。

補足日時：2003/12/14 14:50

通報する

- 0
- 件

通報する

No.2

回答者： lead1976
回答日時：2003/12/14 20:23

補足読みました。

前掲のソースの、サブメニューを括っているspan要素の中は、通常のHTMLと同じように記述することができます。ですので、リンクのテキスト表示を画像に変えたい場合、あるいはリンク自体をそのまま画像とそっくり置き換えたい場合などは、補足で書かれているように、img要素をテキストやリンクの代わりに入れれば良いでしょう。それでスクリプトの動作が阻害される事は、ないと思います。