<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>折り畳み型メニュー（CSS使用）</title>
<script language="JavaScript">
<!--
i=7;//menuで使った数
open_close_flg = new Array(i);//配列を定義
for(j = 0; j < i; j++){ open_close_flg[j] = 0;}//配列の初期化
function open_close_cntl(menu_array,menu_id){//オープンクローズ制御関数
if(open_close_flg[menu_array] == 0){//閉じていたら開く
if(document.getElementById){
document.getElementById(menu_id).style.display='block';}
else{
document.all(menu_id).style.display='block';}
open_close_flg[menu_array] = 1;}//開くに設定
else{//開いていたら閉じる
if(document.getElementById){
document.getElementById(menu_id).style.display='none';}
else{
document.all(menu_id).style.display='none';}
open_close_flg[menu_array] = 0;}//閉じるに設定
}
//-->
</script>
<style type="text/css">
<!--
ul { list-style-type: none;}
.type1 { border: 1px #0000FF ridge;
padding: 2px;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 0px;
background-color: #CCCCCC;
color: #000066;}
.type2 { border: 1px #0000FF ridge;
padding: 2px;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 0px;
background-color: #99FF99;
color: #000066;}
.type3 { border: 1px #0000FF ridge;
padding: 2px;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 0px;
background-color: #FF9999;
color: #000066;}
.type4 { border: 1px #0000FF ridge;
padding: 2px;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 0px;
background-color: #999999;
color: #000066;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<ul>
<li><button type="button" onClick="javascript:open_close_cntl(0,'menu_0')" class="type1" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#CCCCCC'">検索エンジン</button>
<ul id="menu_0" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="javascript:open_close_cntl(1,'menu_1')" class="type2" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#99FF99'">ロボット型検索エンジン</button>
<ul id="menu_1" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.google.com/'" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">Google</button>
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.infoseek.co.jp/'" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">infoseek</button>
</ul>
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="javascript:open_close_cntl(2,'menu_2')" class="type2" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#99FF99'">ディレクトリ型</button>
<ul id="menu_2" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.yahoo.co.jp/'" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">Yahoo! JAPAN</button></li>
</ul>
</ul>
<li><button type="button" onClick="javascript:open_close_cntl(3,'menu_3');" class="type1" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#CCCCCC'">メディア</button>
<ul id="menu_3" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="javascript:open_close_cntl(4,'menu_4');" class="type2" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#99FF99'">新聞系</button>
<ul id="menu_4" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.asahi.com/'" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">朝日新聞</button></li>
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.yomiuri.co.jp/'" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">読売新聞</button></li>
</ul>
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="javascript:open_close_cntl(5,'menu_5');" class="type2" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#99FF99'">テレビ系</button>
<ul id="menu_5" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.nhk.or.jp/'" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">NHK</button></li>
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="javascript:open_close_cntl(6,'menu_6');" class="type3" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#FF9999'">テレビ朝日系列</button>
<ul id="menu_6" style="display:none;">
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.tv-asahi.co.jp/'" class="type4" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#999999'">テレビ朝日</button></li>
<li><img src="line.gif" width="20" height="20"><button type="button" onClick="location.href='http://www.nbn.co.jp/'" class="type4" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='#999999'">名古屋テレビ</button></li>
</ul>
</li>
</ul>
</ul>
</ul>
</body>
</html>
