<html>
<head>
<base target="main">
<title> 메뉴</title>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<br><br><br>
<script language="javascript">
table_height = 20; // 표(Table) 높이를 정한다.
xmenu = new Array;
xsubmenu = new Array;
//타이틀 제목을 써준다
xmenu[0] = '<a href="#"><img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="../img/menu/menu1.gif" border="0" ></a>';
xmenu[1] = '<a href="#"><img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="../img/menu/menu2.gif" border="0" ></a>';
xmenu[2] = '<a href="#"><img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="../img/menu/menu3.gif" border="0" ></a>';
xmenu[3] = '<a href="#"><img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="../img/menu/menu4.gif" border="0" ></a>';
//기본값을 위해 해당 메뉴만큼 null값을 채워준다
xsubmenu[0] = ''
xsubmenu[1] = ''
xsubmenu[2] = ''
xsubmenu[3] = ''
xsubmenu[0] += '<a href="#" class=menudyn3>menu1-1</a>';
xsubmenu[1] += '<a href="http://google.co.kr" class=menudyn3>menu2-1</a>';
xsubmenu[2] += '<a href="#" class=menudyn3>menu3-1</a>';
xsubmenu[2] += ' <font color=#FFFFFF>|</font> '
xsubmenu[2] += '<a href="http://google.co.kr" target="_blank" class=menudyn3>menu3-2</a>';
xsubmenu[2] += ' <font color=#FFFFFF>|</font> '
xsubmenu[2] += '<a href="http://google.co.kr" class=menudyn3>menu3-3</a>';
xsubmenu[3] += '<a href="#" class=menudyn3>menu4-1</a>';
xsubmenu[3] += ' <font color=#FFFFFF>|</font> '
xsubmenu[3] += '<a href="hayan.htm" class=menudyn3>menu4-2</a>';
xsubmenu[3] += ' <font color=#FFFFFF>|</font> '
xsubmenu[3] += '<a href="family.htm" class=menudyn3>menu4-3</a>';
//메뉴에 스타일 시트 적용
document.write('<STYLE TYPE="text/css">');
document.write('A.menudyn3 {color:#333333; text-decoration:none;}');
document.write('A:link {text-decoration: none}');
document.write('A:visited {text-decoration: none}');
document.write('A:hover {color: #999999; text-decoration: none}');
document.write('BODY,tr,td,INPUT{font-size:9pt;font-family:Verdana,굴림,Tahoma,Verdana,MS Sans Serif,Courier New;}');
document.write('</STYLE>');
// 테이블 시작
document.write('<div align=center>');
document.write('<table width='+(xsubmenu.length*81)+' height=30 bgcolor=#FFFFFF cellpadding=0 cellspacing=0 border=0>');
document.write('<tr>');
//document.write('<td>');
//document.write('<table cellpadding=5 cellspacing=1 border=0 width=100%>');
//document.write('<tr>');
// 메인메뉴 시작
for(i=0;i<xsubmenu.length;i++) {
document.write('<td onMouseOver="javascript:colorIt(this);MajMenu('+i+')" align=center ID=td'+i+'>');
document.write('<b><a href="#" onClick="return(false)" onMouseOver="MajMenu('+i+')" CLASS=menudyn3>'+xmenu[i]+'</a></b>');
document.write('</td>');
// 메인메뉴 끝
}
document.write('</tr>');
document.write('<tr>');
//서브메뉴 시작
var td_align= "center"; // 서브메뉴 수평 정렬 (left,center,right)
document.write('<td colspan='+(xsubmenu.length)+' bgcolor=#ffffff height='+table_height+' align='+td_align+' valign=middle>');
document.write('<ilayer id="dynamenu31" width=100% height='+table_height+'>');
document.write('<layer id="dynamenu32" width=100% height='+table_height+'>');
document.write('<div id="dynamenu33"> </div>');
document.write('</layer>');
document.write('</ilayer>');
document.write('</td>');
//서브메뉴 끝
document.write('</tr></table>');
//document.write('</td></tr></table>');
document.write('</div>');
// 테이블 끝
// 테이블 백그라운드 컬러 시작
function colorIt(tditem) {
if(document.all) { // 메뉴가 늘어나면 추가한다 ==> 선택안되을때 배경색
document.all.td0.style.background='#ffffff';
document.all.td1.style.background='#ffffff';
document.all.td2.style.background='#ffffff';
document.all.td3.style.background='#ffffff';
tditem.style.background='#ffffff';// 메뉴가 선택 되었을대 표(Table) 배경색
} else if(document.getElementById) { // 메뉴가 늘어나면 추가한다 ==> 선택안되을때 배경색
document.getElementById("td0").style.background='#ffffff';
document.getElementById("td1").style.background='#ffffff';
document.getElementById("td2").style.background='#ffffff';
document.getElementById("td3").style.background='#ffffff';
tditem.style.background='#ffffff';// 메뉴가 선택 되었을대 표(Table) 배경색
}
}
//테이블 백그라운 컬러 끝
function MajMenu(menu) { //타이틀 메뉴를 제어한다
which = xsubmenu[menu];
if (document.layers){
document.dynamenu31.document.dynamenu32.document.write('<b>'+which+'</b>')
document.dynamenu31.document.dynamenu32.document.close()
} else if (document.getElementById) { // 서브메뉴를 제어한다
document.getElementById("dynamenu33").innerHTML = '<center><b>'+which+'</b></center>';
} else if (document.all) {
dynamenu33.innerHTML=' '
dynamenu33.innerHTML='<b>'+which+'</b>';
}
}
if (document.getElementById)
colorIt(document.getElementById("td0")); // 현재 기본은 td0 ==> 메뉴1로 지정됨
else if (document.all)
colorIt(document.all.td0); // 현재 기본은 td0 ==> 메뉴1로 지정됨
MajMenu(0); // 기본 서브메뉴 지정 ==> 현재 서브 메뉴 1로 지정됨
</SCRIPT>
</body>
</html>
[출처] : http://www.sir.co.kr/bbs/board.php?bo_table=pl_dhtml_javascript&wr_id=52
'프로그램 > Html & Js & Css' 카테고리의 다른 글
| [펌] - 자바스크립트 강좌, 사용법, 객체, 이벤트 등 (0) | 2009.03.30 |
|---|---|
| [펌] - 유용한 서브메뉴_02 (IE/파폭 지원) (0) | 2009.03.30 |
| [펌] - textarea 에 Tab기능 넣기 (0) | 2009.03.30 |
| fieldset tag (0) | 2009.03.30 |
| 테이블 테두리 얇게 하기 (0) | 2009.03.30 |