테스트 사이트 - 개발 중인 베타 버전입니다

부드럽게 슬라이딩되는 MFX 메뉴에 롤오버 효과를 더한 메뉴 스크립트

· 19년 전 · 2527 · 1
드림위버를 사용하면 재미있는 효과를 많이 만들어 볼 수 있습니다
드림위버의 스킨이라 할 수 있는 익스텐션들 중에서는 꽤 쓸만한 것들이 많이 있죠
이 스크립트는 이 익스텐션 중 많은 사이트에서 사용하고 있는 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>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

자바스크립트 팁들이 다 좋군요
감사합니다.

게시글 목록

번호 제목
10156
24771
24770
24769
24768
24767
24766
10155
10148
10143
28668
10140
10139
10137
10135
10134
10133
10130
10129
10128
10127
10126
10122
10121
10117
10116
10114
10113
10102
10098
28667
10097
10095
10090
10088
10083
24761
28660
28658
10082
28655
10071
10069
28651
10060
10053
10052
28649
28644
10050
10046
24749
10040
10030
24748
10028
10016
10010
10008
10003
9999
9991
28638
9988
9987
28635
9986
9980
9975
9971
9968
9966
9965
9961
28621
9956
28619
9952
9940
24746
9939
9938
9935
9934
28618
9932
9931
9930
28617
9929
9928
28615
28614
9927
9926
9925
28613
9924
9923
9922