깔끔한 슬라이드 메뉴 만들기

<style>
<!--
주석중 "무시..."부분은 변경 불가 소스거나
수정시 (예:크기지정) 아무런 변화가 없을시
그리고 주석 붙인이가 모를때.. ^^;;
//-->
<!--
.menu
{
<!--
## 메인 메뉴 ##
무시..
배경색
메뉴 테두리 색
가로 크기
글자 크기
글자체
글자 속성 (기본:none , 굵게:bold , 이탤릭:italic)
또 무시..
마우스 포인트 모양 (MEw님께서 하시는 웹페이지 팁 게시판 14번 게시물 참고)
//-->
   position:relative;
   background-color:gold;
   border:1px solid darkblue;
   width:150;
   font-size:11px;
   font-family:verdana;
   font:bold;
   position:absolute;
   cursor:hand;
}

.item_panel
{
<!--
## 하위 메뉴 ##
무시...
왼쪽 테두리 색
오른쪽 테두리 색
무시...
무시...
//-->
    width:150;
    border-left:1px solid darkblue;
    border-right:1px solid darkblue;
    clip:rect(0,150,0,0);
    position:absolute;
}

.item_panel a
{
   text-decoration:none;
   color:black;
   cursor:hand;
<!--
## 하위 메뉴 A ## (↑)
밑줄, 윗줄 유무 (없음:none , 밑줄:underline , 윗줄:overline)
기본 글자 색
마우스 포인트 모양 (MEw님께서 하시는 웹페이지 팁 게시판 14번 게시물 참고)
//-->
}

.item
{
   background-color:lightyellow;
   width:148;
   font-size:10px;
   font-family:verdana;
<!--
## 하위 메뉴 B ## (↑)
배경색
무시...
글자 크기
글자 체
//-->
}
//-->
</style>

<script language="javascript">
<!--
var height = 20; // 메인 메뉴의 세로크기
var iheight = 15; // 하위 메뉴의 세로크기

var over_bgc = "silver"; // 하위 메뉴에 마우스 올렸을때 배경색
var over_tc = "red"; // 하위 메뉴에 마우스 올렸을때 글자 색

var bgc = "lightyellow"; // 하위 메뉴에 마우스 내렸을때 배경색
var tc = "#000000"; // 하위 메뉴에 마우스 내렸을때 글자색

var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152
var self_menu = new Array();

function write_menu()
{
  smc = 0; // count the position of the self_menu - (해석 불가로 원본 주석으로.. ^^;;)
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;
  
  for(i=0;i<Link.length;i++)
  {
   la = Link[i].split("|"); // 메뉴 구성 부분에서 메뉴 구분 기호
   if (la[0] == "0")
   {
    if(start == 0)
     {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn;
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
     }
     csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
   }
   else
   {
    if(start == 1)
     {
      if(N)mn+=2;
       document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
       start = 0;
     }
    
    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");
    csmc++;
   }
  }
  if (start == 0)
   {
     document.write("</div>");
     h =  csmc * iheight;
     tmn = mn + 5;
     self_menu[smc] = new Array(tmn,h,0);
     name = "down" + (self_menu.length-1);
     obj = document.getElementById(name);
     obj.style.borderBottomColor = "darkblue";
     obj.style.borderBottomWidth = 1;
     obj.style.borderBottomStyle = "solid";
   }
  document.write("</div>");
}

function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
  self_menu[nr+1][2] = 1;
  if(nr == self_menu.length-2)
  {
      to++;
  }
  epull_down(begin,to,0);
}
else
{
  to = 0;
  self_menu[nr+1][2] = 0;
  name = "down"+(nr+2);
  open_item = 0;
  for(i=0;i<nr;i++)
  {
   if(self_menu[i][2] == 1)
    {
        open_item += self_menu[i][1];
    }
  }
  if (N == false)
   {
      open_item-= (c*1);
}
  if (nr== self_menu.length-2)
  {
        val = self_menu[self_menu.length-1][1];to=-1;
  }
  else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
  epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++)
{
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
  if(self_menu[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
}
}
}  

// 메뉴 구성 부분
// 메뉴 구성 방법 - ((Z)* : 번호 Z에 대한 참고사항)
// Link[X] = "형식|이름|경로|타겟";
//   (1)       (2) (3)  (4)  (5)

// 1 : 링크 번호로 X부분에 0부터 차례대로 나가면 됨
// 2 : 링크 형식으로 0은 메인 메뉴 1은 하위메뉴로 구분된다
// (2)* : 형식 0으로 했을시에는 경로와 타겟이 없어야 함 → "0|이름";
// 3 : 메뉴 이름으로 각 메뉴에 해당되는 이름을 적어준다.
// 4 : 해당 메뉴의 경로로 #_url_here을 지우고 해당 경로를 적으면 된다.
// 5 : 타겟을 정하는 부분이다.
// (5)* : 타겟은 _top(현재창에서 열기)와 _blank(새창으로) 그리고 프레임의 이름을 적어주면 된다.
//        하지만 아래 예제 메뉴처럼 타겟이 적혀지지 않았을때는 타겟 _top과 같은 역활을 함

var Link = new Array();
Link[0] = "0|Menu A";
Link[1] = "1|Menu A-a|#_url_here|";
Link[2] = "1|Menu A-b|#_url_here|";
Link[3] = "1|Menu A-c|#_url_here|";
Link[4] = "0|Menu B";
Link[5] = "1|Menu B-a|#_url_here|";

startup(1); // 로딩시 열리는 메뉴 (0:열리지 않음)
//-->
</script>
------------------------------------------------