- ベストアンサー
オンマウスでプルダウンメニューを作りたいのですが？
オンマウスでプルダウンメニューを作りたいのですが、作って見た所表示はしますが、消えません。 それと、横に同様なメニューを作る場合の方法を申し訳ありませんが教えてください 以下がソースです。 <HTML> <HEAD> <TITLE>メニュー</TITLE> </HEAD> <BODY> <A href="#" onMouseover="window['table'].style.display='none'" onMouseout="window['table'].style.display=''"> ●●情報</A> <TABLE id="table" border="1" style="display:" align="left" cellpadding="0" cellspacing="0" width="180"> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left"><a href="http://www.goo.ne.jp"></a>●●</TD> </TR> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left">▲▲</TD> </TR> </TABLE> </BODY> </HTML>
- maimimu_001
- お礼率33% (3/9)
- ホームページ作成ソフト
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
formタグが手っ取り早いのでしょうが、一応サンプルです。画像を使用した方法もあります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>sample</title> <script type="text/javascript"> var Lists = ['Menu1','Menu2']; function hideMenu() { if(!document.getElementById) return; for (var i=0; i < Lists.length; i++) { if(!document.getElementById(Lists[i])) return; var oDIV = document.getElementById(Lists[i]) oDIV.style.display = 'none'; oDIV.style.position = 'absolute'; } } function over(tName) { if(!document.getElementById) return; var tMenu = document.getElementById(tName).style; tMenu.display = (tMenu.display == 'none') ? 'block' : 'none'; } window.onload = function() { hideMenu() } </script> <style type="text/css"> </style> </head> <body bgcolor="#FFCC99"> <table> <tr> <td onclick="over('Menu1')" onmouseover="this.style.backgroundColor='#808080';this.style.cursor='pointer';" onMouseout="this.style.backgroundColor='#696969';" style="width:174px;background-color:#696969;">MENU1<br> <div id="Menu1"> <table border="0" cellpadding="0" cellspacing="0" width="174" style="filter:Alpha(opacity=50);"> <tr height="2"> <td></td> </tr> <tr height="1"> <td></td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#808080'" bgcolor="#ffffff" onmouseout="this.style.backgroundColor='#ffffff'" STYLE="border: 1px #000000 solid;"><a href="#">link1</a></td> </tr> <tr height="1"> <td></td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#808080'" bgcolor="#ffffff" onmouseout="this.style.backgroundColor='#ffffff'" STYLE="border: 1px #000000 solid;"><a href="#">link2</a></td> </tr> </table> </div> </td> <td bgocolor="#000000" width="1"> </td> <td onclick="over('Menu2')" onmouseover="this.style.backgroundColor='#808080';this.style.cursor='pointer';" onMouseout="this.style.backgroundColor='#696969';" style="width:174px;background-color:#696969;">MENU2<br> <div id="Menu2"> <table border="0" cellpadding="0" cellspacing="0" width="174" style="filter:Alpha(opacity=50);"> <tr height="2"> <td></td> </tr> <tr height="1"> <td></td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#808080'" bgcolor="#ffffff" onmouseout="this.style.backgroundColor='#ffffff'" STYLE="border: 1px #000000 solid;"><a href="#">link1</a></td> </tr> <tr height="1"> <td></td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#808080'" bgcolor="#ffffff" onmouseout="this.style.backgroundColor='#ffffff'" STYLE="border: 1px #000000 solid;"><a href="#">link2</a></td> </tr> </table> </div> </td> </tr> </table> </body> </html>
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<A href="#" onMouseover="window['table'].style.display='block'" onMouseout="window['table'].style.display='none'"> <TABLE id="table" border="1" style="display:none" align="left" cellpadding="0" cellspacing="0" width="180"> にしてみて下さい。
補足
すみません。お手数をお掛けしまて。 ご教示頂いた、ソースをＥＤＩＴしたところ メニュー画面が消えてしまいた。 オンマウスで、メニュー画面を表示し、その中のメニューを選択（クリック）しサイトにリンクするように考えています。
お礼
ありがとうございました。参考になりました。