슬라이드 다운(MFXinitMenu) 메뉴

<SCRIPT LANGUAGE="JavaScript">
<!--
function MFXinitMenu(){
IE = document.all ? 1:0;
NN = document.layers ? 1:0;
HIDDEN = (NN) ? 'hide' : 'hidden';
VISIBLE = (NN) ? 'show' : 'visible';
myLayer=new Array();
mySpeed=5;
subLeft=0;
closes=true;

// 다른데는 수정하실 내용이 없습니다.
// 총 레이어 목록
myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style;
myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style;
myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style;
myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style;
myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style;
myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style;
myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style;
myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style;
myLayer[8]=(NN) ? document.MFX8 : document.all.MFX8.style;
myLayer[9]=(NN) ? document.MFX9 : document.all.MFX9.style;
myLayer[10]=(NN) ? document.MFX10 : document.all.MFX10.style;
myLayer[11]=(NN) ? document.MFX11 : document.all.MFX11.style;
myLayer[12]=(NN) ? document.MFX12 : document.all.MFX12.style;
// 레이어가 추가될경우 여기에 목록만 추가 하면 됩니다.
// myLayer[추가 숫자]=(NN) ? document.MFX추가 숫자 : document.all.MFX추가 숫자.style;

running=false;
whichOpen=-1;
lastMain=myLayer.length-2;
MFXmain=new Array();
for(i=0; i<myLayer.length; i++){
mainORsub= i % 2;
MFXmain[i] = mainORsub ? 0:1;
}
myTop=new Array();
myLeft=new Array();
myHeight=new Array();
myWidth=new Array();
mySlide=new Array();
for(i=0; i<myLayer.length; i++){
if(NN&&MFXmain[i]){
if(i==0){
myTop[i]=myLayer[i].top;
myLeft[i]=myLayer[i].left;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(NN&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
mySlide[i]=myTop[i]+myHeight[i];
myLayer[i].left=myLeft[i]+subLeft;
myLayer[i].top=myTop[i];}
if(IE&&MFXmain[i]){
if(i==0){
myLeft[i]=myLayer[i].pixelLeft;
myTop[i]=myLayer[i].pixelTop;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].pixelHeight;
myWidth[i]=myLayer[i].pixelWidth;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(IE&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].pixelHeight;
myWidth[i]=myLayer[i].pixelWidth;
myLayer[i].pixelLeft=myLeft[i]+subLeft;
myLayer[i].pixelTop=myTop[i];
mySlide[i]=myTop[i]+myHeight[i];
}
}
}
function MFXrunMenu(myName,newspeed){
ieStep=0;
thereS=false;
thereC=false;
if(newspeed>0){mySpeed=newspeed;}
first=myName;
if(whichOpen==-1&&!running&&MFXmain[myName]&&!(whichOpen==myName)){
running=true;
if(NN){
myLayer[myName+1].clip.height=0;
myLayer[myName+1].visibility=VISIBLE;
}
if(IE){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
myLayer[myName+1].visibility=VISIBLE;
}
MFXopenMenuS(myName);
MFXopenMenuC(myName);
}
if(whichOpen>=0&&!running&&!(whichOpen==myName)){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
}
if(whichOpen>=0&&!running&&whichOpen==myName&&closes){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
        }
}
function MFXstopCloseS(myName){
running=false;
thereCS=true;
if(closes&&first==whichOpen){whichOpen=-1;}
else{whichOpen=-1;
MFXrunMenu(first);
}
}
function MFXstopOpenS(myName){
running=false;
thereS=true;
if(IE){myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";}
whichOpen=myName;
}
function MFXopenMenuS(myName){
myStep=mySpeed;
if(NN&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].top+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].top;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].top+=myStep;
}
if(myLayer[first+2].top==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
if(IE&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].pixelTop+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].pixelTop;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop+=myStep;
}
if(myLayer[first+2].pixelTop==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
}
function MFXopenMenuC(myName){
myStep=mySpeed;
if(NN&&!thereC){
if ((myLayer[first+1].clip.height+myStep)>myHeight[first+1]){
myLayer[first+1].clip.height=myHeight[first+1]
}
if(myLayer[first+1].clip.height==myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)

}else{
myLayer[first+1].clip.height+=myStep;

}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
if(IE&&!thereC){
ieStep+=myStep;
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";

if(ieStep>=myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
}
function MFXcloseMenuS(myName){
myStep=mySpeed;
if(NN&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].top-myStep<myTop[second+2]){
myStep=myLayer[second+2].top-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].top-=myStep;

}
if(myLayer[second+2].top==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
if(IE&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){
myStep=myLayer[second+2].pixelTop-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop-=myStep;

}
if(myLayer[second+2].pixelTop==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
}
function MFXcloseMenuC(myName){
myStep=-mySpeed;
ieStep1-=mySpeed;
if(NN&&!thereCC){
if ((myLayer[second+1].clip.bottom+myStep)<0){
myLayer[second+1].clip.bottom=0;
}
if(myLayer[second+1].clip.bottom==0){
thereCC=true;

if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[second+1].clip.bottom+=myStep;

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
if(IE&&!thereCC){
if(ieStep1<=0){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
thereCC=true;
if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")";

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
}

/* ***********************  추가시  **********************

각 레이어에 left:20px; top: 500px; 이부분만 적당한 위치에 맞게 수정하면 됩니다.
left:20px; 레이어의 왼쪽 위치
top: 500px;  레이어의 상단 위치는 레이어가 추가될수록 알맞게 수정하면 됩니다.
아래 예제를 보시면 알겁니다.

style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 500px; visibility: hidden"


서브 메뉴가 있을때
-------------------------------------------------------------
// onClick="MFXrunMenu(13,5)" 는 MFXrunMenu(레이어끝자리 숫자,열리는 속도)  열리는 속도는 숫자가 클수록 빠릅니다.

<div id="MFX13" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 500px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(13,5)"><b>메뉴</b></a>
</div>

<div id="MFX"14 style="position:absolute; width:150px; height:88px; z-index:1; left:20px; top: 520px; visibility: hidden">
<a href="#>서브메뉴1</a><br>
<a href="#">서브메뉴2</a><br>
<a href="#">서브메뉴3</a><br>
<a href="#">서브메뉴4</a><br>
<a href="#">서브메뉴5</a><br>
</div>
-------------------------------------------------------------

서브 메뉴가 없을때
-------------------------------------------------------------
<div id="MFX13" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 500px; visibility: hidden">
<a href="#" target="_top"><b>메뉴</b></a>
</div>
-------------------------------------------------------------
*/

//-->
</SCRIPT>
<style>

A:link,A:active,A:visited{text-decoration:none;font-size: 9pt;color:'#333333';}
A:hover {text-decoration:none; color:'ff9900'}
font { font-size: 9pt; }
</style>

<body onLoad="MFXinitMenu()">


<!-- 메뉴1 -->
<div id="MFX0" style="position:absolute; width:182px; height:20px; z-index:2; left:20px; top: 40px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(0,5)"><b>메뉴1</b></a>
</div>

<div id="MFX1" style="position:absolute; width:170px; height:86px; z-index:1; left:20px; top: 40px; visibility: hidden">
<a href="#>서브메뉴1-1</a><br>
<a href="#">서브메뉴1-2</a><br>
<a href="#">서브메뉴1-3</a><br>
<a href="#">서브메뉴1-4</a><br>
<a href="#">서브메뉴1-5</a>
</div>
<!-- 메뉴1 -->


<!-- 메뉴2 -->
<div id="MFX2" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 109px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(2,5)"><b>메뉴2</b></a>
</div>

<div id="MFX3" style="position:absolute; width:150px; height:100px; z-index:1; left:20px; top: 120px; visibility: hidden">
<a href="#>서브메뉴2-1</a><br>
<a href="#">서브메뉴2-2</a><br>
<a href="#">서브메뉴2-3</a><br>
<a href="#">서브메뉴2-4</a><br>
<a href="#">서브메뉴2-5</a><br>
<a href="#">서브메뉴2-6</a>
</div>
<!-- 메뉴2 -->


<!-- 메뉴3 -->
<div id="MFX4" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 192px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(4,5)"><b>메뉴3</b></a>
</div>

<div id="MFX5" style="position:absolute; width:150px; height:35px; z-index:1; left:20px; top: 200px; visibility: hidden">
<a href="#>서브메뉴3-1</a><br>
<a href="#">서브메뉴3-2</a>
</div>
<!-- 메뉴3 -->


<!-- 메뉴4 -->
<div id="MFX6" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 260px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(6,5)"><b>메뉴4</b></a>
</div>

<div id="MFX7" style="position:absolute; width:150px; height:52px; z-index:1; left:20px; top: 280px; visibility: hidden">
<a href="#>서브메뉴4-1</a><br>
<a href="#">서브메뉴4-2</a><br>
<a href="#">서브메뉴4-3</a>
</div>
<!-- 메뉴4 -->


<!-- 메뉴5 -->
<div id="MFX8" style="position:absolute; width:171px; height:20px; z-index:2; left:20px; top: 340px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(8,5)"><b>메뉴5</b></a>
</div>

<div id="MFX9" style="position:absolute; width:150px; height:69px; z-index:1; left:20px; top: 360px; visibility: hidden">
<a href="#>서브메뉴5-1</a><br>
<a href="#">서브메뉴5-2</a><br>
<a href="#">서브메뉴5-3</a><br>
<a href="#">서브메뉴5-4</a><br>
<a href="#">서브메뉴5-5</a>
</div>
<!-- 메뉴5 -->


<!-- 메뉴6 -->
<div id="MFX10" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 500px; visibility: hidden">
<a href="#" onClick="MFXrunMenu(10,5)"><b>메뉴6</b></a>
</div>

<div id="MFX11" style="position:absolute; width:150px; height:88px; z-index:1; left:20px; top: 520px; visibility: hidden">
<a href="#>서브메뉴6-1</a><br>
<a href="#">서브메뉴6-2</a><br>
<a href="#">서브메뉴6-3</a><br>
<a href="#">서브메뉴6-4</a><br>
<a href="#">서브메뉴6-5</a><br>
</div>
<!-- 메뉴6 -->

<!-- 메뉴7 -->
<div id="MFX12" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 591px">
<a href="#" target="_top"><b>메뉴7</b></a>
</div>
<!-- 메뉴7 -->


</body>
</html>