プロが教える店舗＆オフィスのセキュリティ対策術

オンマウスでプルダウンメニューを作りたいのですが？

解決済

  • 質問者：maimimu_001
  • 質問日時：
  • 回答数：2件

オンマウスでプルダウンメニューを作りたいのですが、作って見た所表示はしますが、消えません。
それと、横に同様なメニューを作る場合の方法を申し訳ありませんが教えてください
　以下がソースです。
<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>

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： lodeman
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。参考になりました。

通報する
お礼日時：2004/10/31 12:04

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

<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">
にしてみて下さい。

この回答への補足

すみません。お手数をお掛けしまて。
ご教示頂いた、ソースをＥＤＩＴしたところ
メニュー画面が消えてしまいた。

オンマウスで、メニュー画面を表示し、その中のメニューを選択（クリック）しサイトにリンクするように考えています。

補足日時：2004/10/30 18:51
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報