세로식 배열 테이블 메뉴

2007. 3. 4. 00:15

3. 아래의 소스를 <body>와</body>태그 사이에 넣어주세요. [스크롤 글상자 선택]

<DIV ID=move_color></DIV> <SCRIPT> document.write('<STYLE TYPE="text/css">\na.Style2 {color:#333333;text-decoration:none;}\na:hover.Style2 {color:red;text-decoration:underlined;}\n</STYLE>'); move_color_menu = new Array(); move_color_lien = new Array(); //아래에서 배열 규칙대로 메뉴를 추가하거나 삭제하세요. move_color_menu[0] = '메뉴1'; move_color_menu[1] = '메뉴2'; move_color_menu[2] = '메뉴3'; move_color_menu[3] = '메뉴4'; move_color_menu[4] = '메뉴5'; //아래에서 위의 메뉴 배열에 대응하여 추가하거나 삭제하세요. move_color_lien[0] = '' move_color_lien[1] = '' move_color_lien[2] = '' move_color_lien[3] = '' move_color_lien[4] = '' /*각 주메뉴의 서브메뉴를 아래 규칙에 맞게 추가 또는 삭제하세요. 예)메뉴1 의 서브메뉴는 move_color_lien[0] 으로 정의 */ move_color_lien[0] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴1의 서브메뉴1</A><BR>'; move_color_lien[0] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴1의 서브메뉴2</A><BR>'; move_color_lien[0] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴1의 서브메뉴3</A><BR>'; move_color_lien[1] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴2의 서브메뉴1</A><BR>'; move_color_lien[1] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴2의 서브메뉴2</A><BR>'; move_color_lien[1] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴2의 서브메뉴3</A><BR>'; move_color_lien[2] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴3의 서브메뉴1</A><BR>'; move_color_lien[2] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴3의 서브메뉴2</A><BR>'; move_color_lien[2] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴3의 서브메뉴3</A><BR>'; move_color_lien[2] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴3의 서브메뉴4</A><BR>'; move_color_lien[3] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴4의 서브메뉴1</A><BR>'; move_color_lien[3] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴4의 서브메뉴2</A><BR>'; move_color_lien[3] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴4의 서브메뉴3</A><BR>'; move_color_lien[4] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴5의 서브메뉴1</A><BR>'; move_color_lien[4] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴5의 서브메뉴2</A><BR>'; move_color_lien[4] += '<A HREF="http://www.sourcenara.com" CLASS=Style2 TARGET="_self">메뉴5의 서브메뉴3</A><BR>'; move_color_pos = -1; //아래는 화면의 출력부분입니다. 분석 응용이 가능하신 분은 디자인이나 폰트등을 변형해 보세요. function move_color_menu_draw() { move_color_aff = "<TABLE BORDER=0 BGCOLOR=#000000 CELLPADDING=0 CELLSPACING=0 WIDTH=160><TR><TD><TABLE BORDER=0 CELLPADDING=03 CELLSPACING=1 WIDTH=100%>"; for(a=0;a<move_color_menu.length;a++) { if(move_color_pos == a || !document.getElementById) bgcolor = "#CCCCCC"; else bgcolor = "#F6F6F6"; move_color_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=\"#\" onMouseOver=\"move_color_pos="+a+";move_color_menu_draw()\" CLASS=Style2><FONT FACE=\"돋움\" SIZE=2><b>"+move_color_menu[a]+"</b></FONT></A></TD></TR>"; if(move_color_pos == a || !document.getElementById) move_color_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"돋움\" SIZE=-1>"+move_color_lien[a]+"</FONT></TD></TR>"; } move_color_aff += "</TABLE></TD></TR></TABLE>"; if(document.getElementById) document.getElementById("move_color").innerHTML = move_color_aff; else document.write(move_color_aff); } function move_color_reset() { move_color_pos = -1; move_color_menu_draw(); } window.onload = move_color_menu_draw; document.onclick = move_color_reset; </SCRIPT>

'Information' 카테고리의 다른 글

하룻동안 창 띄우지 않기 (0)	2007.03.04
동적으로 테이블의 tr 생성 및 삭제 (0)	2007.03.04
접근할 수 있는 객체를 확인하는 스크립트 (0)	2007.03.03

margalog

세로식 배열 테이블 메뉴

'Information' 카테고리의 다른 글

+ Recent posts

티스토리툴바