• ベストアンサー
  • すぐに回答を!

ドロップダウンメニューのプログラムを教えて・・・

  • 質問No.7076705
  • 閲覧数104
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 42% (21/49)

今非常に困っています・・・。

プログラムのどの本を見てもドロップダウンメニューのプログラムが無いし、インターネットで検索してソースコードを貼ってみても、全然動きのあるドロップダウンメニューにならずに、単なる縦列横列のリンクになってしまい、ドロップダウンメニューを作れません。

今現在JavaScriptでドロップダウンメニューの着いた自分用のHPを作りたいと強く思っているのですが、下のようなプログラムの中にドロップダウンメニューを入れるためには、どのように入力したら良いのかご教授願えないでしょうか?。

非常に身勝手な質問とは承知しているのですが、画像のイメージは添付ファイルの通りで、縦と横にそれぞれメニューが出てくるようにしたいです・・・。

ご回答をお待ちしております。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">



<title></title>




<script language="JavaScript">




</script>



<body>
<form name="">




</form>
</body>

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 41% (3584/8636)

とりあえず、下記みたいなのでしょうかね。参考にどうぞ。
これだとメニューの数だけfunctionが必要で、スマートなscriptではありません。もう少し頭のいい方ならもっとすっきり書けるはずですね。

<script language="javascript">
function over1(){
document.all('L1').style.backgroundColor="yellow";
document.all('L4').style.visibility="visible";
}

function off1(){
document.all('L1').style.backgroundColor="#a0a000";
document.all('L4').style.visibility="hidden";
}
function over2(){
document.all('L2').style.backgroundColor="yellow";
document.all('L5').style.visibility="visible";
}

function off2(){
document.all('L2').style.backgroundColor="#a0a000";
document.all('L5').style.visibility="hidden";
}

function over3(){
document.all('L3').style.backgroundColor="yellow";
document.all('L6').style.visibility="visible";
}

function off3(){
document.all('L3').style.backgroundColor="#a0a000";
document.all('L6').style.visibility="hidden";
}

function over4(){
document.all('L4').style.backgroundColor="yellow";
document.all('L4').style.visibility="visible";
}

function off4(){
document.all('L4').style.backgroundColor="#a0a000";
document.all('L4').style.visibility="hidden";
}
</script>

<body>
<div id="L1" style="position:relative;background-color:#a0a000;
width:150;height:30" onMouseOver="over1()" onMouseOut="off1()">
MENU-1
</div>
<div id="L2" style="position:relative;background-color:#a0a000;
width:150;height:30" onMouseOver="over2()" onMouseOut="off2()">
MENU-2
</div>
<div id="L3" style="position:relative;background-color:#a0a000;
width:150;height:30" onMouseOver="over3()" onMouseOut="off3()">
MENU-3
</div>

<!--以下はサブメニュー-->
<div id="L4" style="position:absolute;top:15;left:160;background-color:#a0a000;
width:150;height:30;visibility:hidden;" onMouseOver="over4()" onMouseOut="off4()">
subMENU-1
</div>
お礼コメント
dwuoa

お礼率 42% (21/49)

回答ありがとうございました。

参考になったのですが、最後のサブメニューの箇所しかドロップダウンメニューが動作しなかったようなので、自分で頭を抱えて改良していました。

ある程度全体に動作するようになってきたので、どうにか頑張ってみます!。

プログラムで回答して下さりすごく有難く思っています!。ありがとうございました!。
投稿日時:2011/10/18 07:28
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

ピックアップ

ページ先頭へ