부드럽게 슬라이딩되는 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>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 1개
감사합니다.