- ベストアンサー
menuの表示
質問です。 以下の例１のような左右に分かれたページで、「サービスガイド」をクリックすると、その下のメニューが下に移動して、その間にサブメニューが表示され、さらにマウスが移動したら、そのサブメニューが閉じて、元に戻るようなスクリプトを探しています。そのようなスクリプトってないでしょうか？ ご存知の方、よろしくお願いいたします。 例１ http://www.starcat.ne.jp/mediacat/
- ironika
- お礼率6% (7/102)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ちょっと作ってみました。 こういうものでは、いかがでしょうか。 <html> <head> <title></title> <script type="text/javascript"><!-- var HD= new Array(); function showdown(tgt){//サブメニューの表示調整 if (document.getElementById){ tar=document.getElementById(tgt); if(tar.style.display=="block"){//サブメニューが表示されている時は隠す tar.style.display="none" } else {//サブメニューが表示されていなければ、表示させる tar.style.display="block"; } } } function hideaway(tgt){// サブメニューからポインタが離れた時の処理 if (document.getElementById){ HD[tgt]=setTimeout('document.getElementById("'+tgt+'").style.display="none"',2000); // サブメニューからポインタが離れたら、2秒後に隠す } } function keepit(tgt){//ポインタがメニューの上に戻った時の処理 if (HD[tgt]){ clearTimeout(HD[tgt]); // サブメニューを2秒後に隠す処理を停止 } } //--></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以前などでは動作しないかもしれません。 参考になれば幸いです。
その他の回答 (1)
補足読みました。 前掲のソースの、サブメニューを括っているspan要素の中は、通常のHTMLと同じように記述することができます。 ですので、リンクのテキスト表示を画像に変えたい場合、あるいはリンク自体をそのまま画像とそっくり置き換えたい場合などは、補足で書かれているように、img要素をテキストやリンクの代わりに入れれば良いでしょう。 それでスクリプトの動作が阻害される事は、ないと思います。
補足
早速の解答ありがとうございます。 もしよろしければ、追加で教えていただきたいのですが、このスクリプトのリンクの部分は、画像に変更しても問題なく動作しますでしょうか？通常通り<img src= ・・・・・・>のタグを挿入すればOKですか？もし、何らかのスクリプトが必要ならば、教えてください。よろしくお願いいたします。