pulldown

ＨＰ入門サイト

素材サイト

プルダウンメニューのソース　ソースをコピー

<!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">
<title>pulldown</title>
<script type="text/javascript">
<!--
var timerID = "";

function mn(n){
if(timerID != ""){
	clearTimeout(timerID);
}
var val = n;
dlt2();
document.getElementById(val).style.visibility="visible";
document.getElementById(val).style.zIndex="1";
}

function dlt(){
timerID=setTimeout("dlt2()",100);
}

function dlt2(){
for (i=1;i<3;i++){
	var val2 = "dv" + i;
	document.getElementById(val2).style.visibility="hidden";
	document.getElementById(val2).style.zIndex="0";
	}
}
//-->
</script>
<style type="text/css">
<!--
a{text-decoration:none;color:gray;}
a:hover{color:#000000;}
body{color:#000000;font-size:12pt;
line-height:150%;font-family:"ＭＳ Ｐゴシック";}
table{color:#ffffff;font-size:12pt;
line-height:150%;font-family:"ＭＳ Ｐゴシック";}

#dv1{
/* ↓ここの position の値がプルダウンメニュー１の表示位置です */
position:absolute;left:12;top:42;
background-color:#ffffff;visibility:hidden;
border: 1px solid gray;
}

#dv2{
/* ↓ここの position の値がプルダウンメニュー２の表示位置です */
position:absolute;left:208;top:42;
background-color:#ffffff;visibility:hidden;
border: 1px solid gray;
}
-->
</style>
</head>

<table align="left" bgcolor="gray" border="1" cellspacing="0" bordercolor="#ffffff"><td align="center"><span style="width:192;cursor:hand;" onmouseover="mn('dv1');" onmouseout="dlt();">ＨＰ入門サイト</span></td>
<td align="center"><span style="width:192;cursor:hand;" onmouseover="mn('dv2');" onmouseout="dlt();">素材サイト</span></td>
</table>

<div id="dv1">
<span style="width:192; height:50;padding:8px;" onmouseover="mn('dv1');" onmouseout="dlt();">
<a href="http://www.tohoho-web.com/www.htm">とほほ</a><br>
<a href="http://www.eva.hi-ho.ne.jp/misteroz/HPmaking.html">Mr.OZ</a>
</span></div>

<div id="dv2">
<span style="width:192; height:50;padding:8px;" onmouseover="mn('dv2');" onmouseout="dlt();">
<a href="http://www.yasuragian.com/">やすらぎ庵</a><br>
<a href="http://www4.plala.or.jp/toroly/">こぐま屋</a>
</span></div>

</body>
</html>