ドロップダウンメニューを短縮したい

解決済

質問者：dwuoa
質問日時：2011/10/27 19:41
回答数：1件

今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。

ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。

できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。

<script language="javaScript">

function overL0(){
document.all("L0").style.backgroundColor="yellow";
document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden";
}
function offL0(){
document.all("L0").style.backgroundColor="#afeeee";
document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden";
}

function overL1(){
document.all("L1").style.backgroundColor="yellow";
document.all("S1").style.visibility="visible";
}
function offL1(){
document.all("L1").style.backgroundColor="#afeeee";
document.all("S1").style.visibility="visible";
}

function overS1(){
document.all("S1").style.backgroundColor="yellow";
document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible";
}

function offS1(){
document.all("S1").style.backgroundColor="#afeeee";
document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible";
}

function oversi1(){
document.all("si1").style.backgroundColor="yellow";
document.all("si1").style.visibility="visible";
}
function offsi1(){
document.all("S1").style.backgroundColor="#afeeee";
document.all("si1").style.visibility="visible";
}

function oversi2(){
document.all("si2").style.backgroundColor="yellow";
document.all("si2").style.visibility="visible";
}
function offsi2(){
document.all("si2").style.backgroundColor="#afeeee";
document.all("si2").style.visibility="visible";
}

</script>

<body>

<div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()">
</div>
<div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()">
name1
</div>

<div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()">
name2
</div>
<div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()">
<a href="http://www.google.co.jp/" target="blank" target="c">A</a><br>
</div>
<div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()">
<a href="http://www.google.co.jp/" target="blank" target="c">B</a><br>
</div>

</body>