로딩시 부드럽게 열리는 메뉴 ::: bcpark.net

자유롭게 게시물을 올릴수있는 게시판입니다.

BCPARK 유튜브 구독 감사합니다. BCPARK 유튜브 구독 감사합니다.
비씨파크 회원 뭉쳐서 100만 유튜브 채널 가즈아~~~

로딩시 부드럽게 열리는 메뉴

<html>
<head>
<style>


   position:relative;
   background-color:#006699;
   border:1px solid #006699;
   width:150;
   font-size:11px;
   font-family:verdana;
   font:bold;
   position:absolute;
   cursor:hand;
}

.item_panel
{

    width:150;
    border-left:1px solid #006699;
    border-right:1px solid #006699;
    clip:rect(0,150,0,0);
    position:absolute;
}

.item_panel a
{
   text-decoration:none;
   color:black;
   cursor:hand;

}

.item
{
   background-color:#006699;
   width:148;
   font-size:10px;
   font-family:verdana;

}
//-->
</style>
</head>
<body>

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 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 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과 같은 역활을 함