부드럽게 슬라이딩되는 MFX 메뉴에 롤오버 효과를 더한 메뉴 스크립트 정보
JavaScript 부드럽게 슬라이딩되는 MFX 메뉴에 롤오버 효과를 더한 메뉴 스크립트
본문
드림위버를 사용하면 재미있는 효과를 많이 만들어 볼 수 있습니다
드림위버의 스킨이라 할 수 있는 익스텐션들 중에서는 꽤 쓸만한 것들이 많이 있죠
이 스크립트는 이 익스텐션 중 많은 사이트에서 사용하고 있는 MFX 슬라이딩 메뉴를 응용하여 드림위버자체에서 제공하는 롤오버 이미지 효과 까지 더한 메뉴 스크립트 입니다
초보들이 텍스트 에디터로만 작업하기엔 좀 힘든면이 있겠지만 꼼꼼히 설명문을 살펴보고 멋지게 응용 해 보시기 바랍니다
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> jasko sample script </title>
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->
<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=1; // 스피드를 설정 합니다. 클수록 슬라이딩 속도가 빨라집니다
subLeft=0;
closes=true;
// 부메뉴를 합하여 전체 레이어의갯수(메뉴) 만큼 설정 합니다
// 메뉴가 10개이면 부메뉴도 10개가 되므로, myLayer[19] 까지 추가 합니다
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;
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);
}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<!------------------------- 여기까지 ------------------------------------>
</head>
<!---- [2단계] 아래 코드를 <BODY> 태그 안에 붙여 넣으세요
MM_preloadImages() 괄호안에 있는 것은 마우스를 대었을때 보여질 이미지들을 설정 합니다
따옴표와 콤마에 주의하세요
--->
<body onLoad="MFXinitMenu();MM_preloadImages('button-1-on.gif','button-2-on.gif','button-3-on.gif','button-4-on.gif','button-5-on.gif')">
<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->
<!--------
메뉴를 더 추가할 때는 각 호출함수들의 괄호안에 들어가는 인수(숫자, 혹은 파일명)을 어떻게 사용했나 충분히 관찰한 후에
수정 하세요
각 메뉴들은 레이어 안에 들어 있습니다 .
레이어의 위치에 유의해서 수정 하세요
------->
<!--/////////////////// 첫번째 메뉴 설정 부분입니다 ///////////////////////////-->
<!-------- 첫번째 메뉴의 이미지가 들어가는 부분의 레이어 설정 입니다 ------->
<DIV id="MFX0" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 20px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(0,5)" onMouseOver="MM_swapImage('Image1','','button-1-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image1 src="button-1.gif" width="150" height="20" border=0></a></DIV>
<!-------- 첫번째 메뉴의 부메뉴가 들어가는 부분 입니다 ------->
<DIV id="MFX1" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 40px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu1</a><p align=center><img src="logo.gif" border=0 alt="이렇게 이미지를 넣을 수도 있습니다"></DIV>
<!-------- 첫번째 메뉴의 부메뉴가 끝났습니다 ------->
<!--///////////// 첫번째 메뉴의 설정이 모두 끝났습니다 ////////////////////-->
<!-------- 두번째 메뉴 ------->
<DIV id="MFX2" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 100px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(2,5)" onMouseOver="MM_swapImage('Image2','','button-2-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image2 src="button-2.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX3" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 120px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu2</a></DIV>
<!-------- 두번째 메뉴 끝 ------->
<!-------- 세번째 메뉴 ------->
<DIV id="MFX4" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 180px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(4,5)" onMouseOver="MM_swapImage('Image3','','button-3-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image3 src="button-3.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX5" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 200px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu3</a></DIV>
<!-------- 세번째 메뉴 끝 ------->
<!-------- 네번째 메뉴 ------->
<DIV id="MFX6" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 260px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(6,5)" onMouseOver="MM_swapImage('Image4','','button-4-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image4 src="button-4.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX7" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 280px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu4</a></DIV>
<!-------- 네번째 메뉴 끝 ------->
<!-------- 다섯번째 메뉴 ------->
<DIV id="MFX8" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 340px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(8,5)" onMouseOver="MM_swapImage('Image5','','button-5-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image5 src="button-5.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX9" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 360px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu5</a></DIV>
<!-------- 다섯번째 메뉴 끝 ------->
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
드림위버의 스킨이라 할 수 있는 익스텐션들 중에서는 꽤 쓸만한 것들이 많이 있죠
이 스크립트는 이 익스텐션 중 많은 사이트에서 사용하고 있는 MFX 슬라이딩 메뉴를 응용하여 드림위버자체에서 제공하는 롤오버 이미지 효과 까지 더한 메뉴 스크립트 입니다
초보들이 텍스트 에디터로만 작업하기엔 좀 힘든면이 있겠지만 꼼꼼히 설명문을 살펴보고 멋지게 응용 해 보시기 바랍니다
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> jasko sample script </title>
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->
<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=1; // 스피드를 설정 합니다. 클수록 슬라이딩 속도가 빨라집니다
subLeft=0;
closes=true;
// 부메뉴를 합하여 전체 레이어의갯수(메뉴) 만큼 설정 합니다
// 메뉴가 10개이면 부메뉴도 10개가 되므로, myLayer[19] 까지 추가 합니다
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;
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);
}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<!------------------------- 여기까지 ------------------------------------>
</head>
<!---- [2단계] 아래 코드를 <BODY> 태그 안에 붙여 넣으세요
MM_preloadImages() 괄호안에 있는 것은 마우스를 대었을때 보여질 이미지들을 설정 합니다
따옴표와 콤마에 주의하세요
--->
<body onLoad="MFXinitMenu();MM_preloadImages('button-1-on.gif','button-2-on.gif','button-3-on.gif','button-4-on.gif','button-5-on.gif')">
<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->
<!--------
메뉴를 더 추가할 때는 각 호출함수들의 괄호안에 들어가는 인수(숫자, 혹은 파일명)을 어떻게 사용했나 충분히 관찰한 후에
수정 하세요
각 메뉴들은 레이어 안에 들어 있습니다 .
레이어의 위치에 유의해서 수정 하세요
------->
<!--/////////////////// 첫번째 메뉴 설정 부분입니다 ///////////////////////////-->
<!-------- 첫번째 메뉴의 이미지가 들어가는 부분의 레이어 설정 입니다 ------->
<DIV id="MFX0" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 20px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(0,5)" onMouseOver="MM_swapImage('Image1','','button-1-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image1 src="button-1.gif" width="150" height="20" border=0></a></DIV>
<!-------- 첫번째 메뉴의 부메뉴가 들어가는 부분 입니다 ------->
<DIV id="MFX1" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 40px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu1</a><p align=center><img src="logo.gif" border=0 alt="이렇게 이미지를 넣을 수도 있습니다"></DIV>
<!-------- 첫번째 메뉴의 부메뉴가 끝났습니다 ------->
<!--///////////// 첫번째 메뉴의 설정이 모두 끝났습니다 ////////////////////-->
<!-------- 두번째 메뉴 ------->
<DIV id="MFX2" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 100px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(2,5)" onMouseOver="MM_swapImage('Image2','','button-2-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image2 src="button-2.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX3" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 120px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu2</a></DIV>
<!-------- 두번째 메뉴 끝 ------->
<!-------- 세번째 메뉴 ------->
<DIV id="MFX4" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 180px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(4,5)" onMouseOver="MM_swapImage('Image3','','button-3-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image3 src="button-3.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX5" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 200px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu3</a></DIV>
<!-------- 세번째 메뉴 끝 ------->
<!-------- 네번째 메뉴 ------->
<DIV id="MFX6" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 260px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(6,5)" onMouseOver="MM_swapImage('Image4','','button-4-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image4 src="button-4.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX7" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 280px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu4</a></DIV>
<!-------- 네번째 메뉴 끝 ------->
<!-------- 다섯번째 메뉴 ------->
<DIV id="MFX8" style="position:absolute; width:150px; height:20px; z-index:2; left:20px; top: 340px; visibility: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"><a onfocus=this.blur() href="#" onClick="MFXrunMenu(8,5)" onMouseOver="MM_swapImage('Image5','','button-5-on.gif',1)" onMouseOut="MM_swapImgRestore()"><img name=Image5 src="button-5.gif" width="150" height="20" border=0></a></DIV>
<DIV id="MFX9" style="position:absolute; width:150px; height:150px; z-index:1; left:20px; top: 360px; visibility: hidden; background-color: #CCFF99; layer-background-color: #CCFF99; border: 1px none #000000"><a href="#">submenu5</a></DIV>
<!-------- 다섯번째 메뉴 끝 ------->
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
추천
0
0
댓글 1개
자바스크립트 팁들이 다 좋군요
감사합니다.
감사합니다.
