트리구조형 메뉴 (부드러운 스크롤효과)

http://oxtag.com/html/ex/menu/menu20041124.html

<style> /* 메뉴판의 전체 테두리 설정 */ #main_panel { border:1px solid deeppink; position:relative; overflow:hidden; } /* 주메뉴의 스타일 설정 */ .head_item { background-color:pink; font-size:12px; font-family:굴림; font:bold; border-top:1px solid deeppink; border-bottom:1px solid deeppink; position:absolute; left:0px; text-align:left; } /* 부메뉴의 스타일 설정 */ .item { background-color:lightyellow; font-family:굴림; font-size:12px; left:0px; position:relative; text-align:left; } .item_panel { position:absolute; background-color:lightyellow; left:0px; }   .item_panel a   {    text-decoration:none;    color:deeppink;   } </style> <script language="JavaScript"> var height = 200;  //메뉴상자의 높이 var vwidth = 150; // 메뉴상자의 가로크기 var speed = 0; var step =2; var hheight = 20; // 메인메뉴 항목의 높이 var iheight = 15; // 각 부항목의 높이 var bgc = "lightyellow" // 배경색상 var tc = "black" // 글자색상   var over_bgc = "lightgreen"; // 마우스 오버시 부메뉴의 배경색상 var over_tc = "red"; // 마우스 오버시 부메뉴의 글자색상 var open = -1; var N = (document.all) ? 0 : 1; var Link_count = 0; var ntop = 0; var items = false var z = 0; var hnr = 1; var timerID = null; var link_array = new Array(); function write_menu() { document.write("<div id=main_panel style='height:") if (N) document.write(height); else document.write(height-2); document.write(";width:"); if (N) document.write(vwidth) else document.write(vwidth-2) document.write("'>"); cl =0; for(i=0;i<Link.length;i++) { la = Link[i].split("|"); if(la[0] == "0") {    if (items == true) {document.write("</div>");items = false;}    document.write("<div class='head_item' id='move"+cl+"' style='cursor:hand;padding:3px;height:"+hheight+";width:"+vwidth+";top:"+(ntop-1)+";z-index:"+z+"' onMouseover='move("+cl+","+hnr+");this.style.backgroundColor=\"#2f4f4f\"' onMouseOut=\"this.style.backgroundColor=''\"> "+la[1]+"</div>");    link_array[cl] = new Array("up",0,hnr);    cl++;hnr++;    ntop += hheight-1;    z++; } else {   cheight = height - ntop + 1;   if (items == false) {document.write("<div class='item_panel' id='move"+cl+"' style='padding:3px;height:"+cheight+"px;width:"+vwidth+";top:")   if (N) document.write(ntop+2);   else document.write(ntop);   document.write(";z-index:"+z+"'>");   z++;   link_array[cl] = new Array("up",0,"");   cl++;   }    document.write("<a href='"+la[2]+"'");    if (la[3] != "") document.write(" target='" + la[3] + "' ");    document.write(" onmouseover=color('item"+i+"') onmouseout=uncolor('item"+i+"') style='cursor:hand;'><div class='item' id='item"+i+"' style='padding:2px;height:"+iheight+";width:"+vwidth+"'>"+la[1]+"</div></a>");   items = true; } } document.write("</div>"); if (items == true) {document.write("</div>");} } function color(obj) { document.getElementById(obj).style.backgroundColor = over_bgc; document.getElementById(obj).style.color = over_tc return true; } function uncolor(obj) { document.getElementById(obj).style.backgroundColor = bgc; document.getElementById(obj).style.color = tc; } function move(idnr,hid) { if ((idnr != open)&& (timerID == null)) { if(link_array[idnr][0] == "up") {   down = height - (hid * hheight) - ((hnr -(hid+1))* hheight) + 2;   if(N) down+=2;   dmover(idnr+2,down); } else {   up = height - ((hid -1) * hheight) -((hnr - (hid))* hheight) +2;   if(N) up+=2;   umover(idnr,up); } open = idnr; } } function dmover(idnr,down) { for (i=idnr;i<link_array.length;i++) {   if(link_array[i][0] == "up")   {    txt_obj = "move" + i    document.getElementById(txt_obj).style.top = parseInt(document.getElementById(txt_obj).style.top) + step;   } } down-= step; if(down > 0)timerID = setTimeout("dmover("+idnr+","+down+")",speed); else {   for (i=idnr;i<link_array.length;i++) {link_array[i][0] = "down";} timerID = null; } } function umover(idnr,up) { for (i=0;i<(idnr+2);i++) {   if(link_array[i][0] == "down")   {    txt_obj = "move" + i    document.getElementById(txt_obj).style.top = parseInt(document.getElementById(txt_obj).style.top) - step;   } } up-=step; if(up > 0)timerID = setTimeout("umover("+idnr+","+up+")",speed); else {   for (i=0;i<(idnr+2);i++) {link_array[i][0] = "up";} timerID = null; } } function start(idnr) { write_menu(); for(i=0;i<link_array.length;i++) {   if (link_array[i][2] == idnr)   {    pull = i;    i = link_array.length;   }   move(pull,idnr); } }   </script> <script language="JavaScript">   var Link = new Array(); // Link[번호] = "구분|제목:URL|타겟"; // 구분 : 0 = 주메뉴, 1 = 부메뉴   Link[0] = "0|태그피아";   Link[1] = "1|태그피아|http://oxtag.com|_blank";   Link[2] = "1|태그피아|http://oxtag.com|_blank";   Link[3] = "1|태그피아|http://oxtag.com|_blank";   Link[4] = "1|태그피아|http://oxtag.com|_blank";   Link[5] = "0|검색";   Link[6] = "1|야후|http://yahoo.co.kr|_blank";   Link[7] = "1|네이버|http://naver.com|_blank"   Link[8] = "0|메일";   Link[9] = "1|다음|http://daum.net|_blank";   Link[10] = "1|다모임|http://damoim.net|_blank";   Link[11] = "0|태그피아";   Link[12] = "1|태그피아|http://oxtag.com|_blank";   Link[13] = "0|태그피아";   Link[14] = "1|태그피아|http://oxtag.com|_blank"; start(1); </script>