부드럽게 슬라이딩되는 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>
댓글 1개
19년 전
자바스크립트 팁들이 다 좋군요
감사합니다.
감사합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 28772 |
HTML
오늘 날짜와 요일 넣기
1
|
| 10555 | |
| 10554 |
JavaScript
홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려줍니다
|
| 10553 | |
| 28770 |
HTML
창의 사이즈 변경 금지 시키기
1
|
| 28769 |
HTML
손님의 방문 횟수를 알려 줍니다
|
| 10552 | |
| 10551 | |
| 28768 |
HTML
자바스크립트 버튼에 링크 걸기
|
| 10550 | |
| 10549 |
JavaScript
들어올때나 나갈때나 인사는 착실히 해야죠..ㅋㅋㅋㅋ
|
| 10548 | |
| 10547 | |
| 28767 |
HTML
이름을 물어보고 인사하는 스크립트
|
| 10546 | |
| 10545 |
JavaScript
창을 열면 인사하는 간단한 스크립트
|
| 10544 | |
| 28766 | |
| 10541 | |
| 10540 | |
| 10538 | |
| 10537 |
기타
순발력테스트
|
| 10535 |
Flash
Ajax강의
1
|
| 10534 |
JavaScript
named -- dns서버
|
| 10533 |
JavaScript
문서내 이미지갯수 출력
|
| 10532 | |
| 28760 | |
| 10531 | |
| 10530 |
JavaScript
리눅스 부팅후 자동 실행
|
| 28759 |
HTML
버튼에 스타일주기(익스)
|
| 10527 | |
| 10525 | |
| 10523 | |
| 10520 |
Flash
swish 서브메뉴 제작방법
2
|
| 28758 |
HTML
오른쪽마우스클릭시메뉴(익스전용)
|
| 28757 |
HTML
오른쪽마우스클릭시메뉴(익스전용)
|
| 10519 | |
| 10518 |
MySQL
mysql 자동 최적화 / 복구 스크립트
|
| 10517 |
JavaScript
내용 복사해서 붙어넣기 하면 출처까지가 따라서 나옴 (출처:네이버 소스)
|
| 10515 |
JavaScript
ncftp사용법
1
|
| 28756 |
HTML
영카트에서 카테고리 검색하기
|
| 10514 | |
| 10512 | |
| 10511 |
JavaScript
영어철저가 의심스러울때
|
| 10510 |
JavaScript
로그인할때 나오는 메시지 바꾸기
|
| 10509 | |
| 10508 | |
| 10507 | |
| 28755 |
HTML
자바스크립트로 url 획득
|
| 28751 | |
| 10506 |
JavaScript
파일을 엑셀 혹은 워드로 다운 받기
|
| 10505 | |
| 10504 |
JavaScript
테이블속성연습
|
| 10503 | |
| 10499 | |
| 10487 | |
| 28748 |
HTML
투명도조절
2
|
| 10486 | |
| 28747 | |
| 10484 |
JavaScript
날짜 계산하기
1
|
| 10483 |
기타
폼필드로 바탕색상조정
|
| 10482 | |
| 28746 |
HTML
버튼 하나로 링크두개를 열어보자
|
| 10480 |
JavaScript
접속시도를 여러번 하는 IP 자동 블락하기
1
|
| 10476 | |
| 10473 |
JavaScript
팝업창.. 지정한 시간대에 열기
2
|
| 10472 |
기타
한글 영문으로 변환
|
| 28745 |
HTML
[펌]다중 업로드
|
| 10460 | |
| 10456 | |
| 28739 | |
| 10455 | |
| 28738 | |
| 10451 | |
| 10448 | |
| 10446 |
JavaScript
font-weight 숫자로도 가능
1
|
| 10445 |
JavaScript
에디터 수정해서 쓰세요!
|
| 10444 |
기타
리사이즈 팝업
|
| 10442 | |
| 10439 |
JavaScript
배경음악 또는 배경이미지 등 브라우저를 열고 처음 접속시 한번만 실행
2
|
| 10408 |
Flash
무료 플래시 209개
30
|
| 10403 | |
| 10400 |
JavaScript
문서내에 글씨 찾기
2
|
| 10398 | |
| 10397 | |
| 10396 |
JavaScript
ssh dictionary attack 막기
|
| 10391 | |
| 10390 | |
| 28733 |
HTML
밑의 갤러리 압축 화일
4
|
| 10389 |
JavaScript
까만도둑님께서 플래쉬 갤러리가 필요하시다고 해서...
|
| 10383 | |
| 10378 |
Flash
플래시에서 tabIndex 적용하기
4
|
| 28732 | |
| 10342 |
Flash
간단하지만 유용한 배너관리 시스템
35
|
| 28731 | |
| 10335 |
Flash
플래시 자동 슬라이더
6
|
| 28730 |
HTML
cart클래스2
|
| 28729 |
HTML
cart클래스1
|
| 28727 |
HTML
비교 복사
1
|
| 10332 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기