정말 예쁜 슬라이딩 메뉴 정보
javascript 정말 예쁜 슬라이딩 메뉴
첨부파일
본문
<HTML>
<HEAD>
<TITLE> 최강 이신디 or 그누보드 </TITLE>
<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. 없으면 그냥 두세요-->
<SCRIPT LANGUAGE="JavaScript">
// 크로스 브라우저 설정
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
slideoutActive = 0
if (n) {
slideout1 = document.Layer1.document.ContentsLayer.document.ContentsLayer1
slideout2 = document.Layer1.document.ContentsLayer.document.ContentsLayer2
slideout3 = document.Layer1.document.ContentsLayer.document.ContentsLayer3
slideout4 = document.Layer1.document.ContentsLayer.document.ContentsLayer4
slideout5 = document.Layer1.document.ContentsLayer.document.ContentsLayer5
}
if (ie) {
slideout1 = ContentsLayer1.style
slideout2 = ContentsLayer2.style
slideout3 = ContentsLayer3.style
slideout4 = ContentsLayer4.style
slideout5 = ContentsLayer5.style
}
slideoutShown = slideout1
slideoutShown.xpos = 0
slideoutNew = "none"
slideoutNew.xpos = -285
}
function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1
slideoutNew = which
slideoutNew.xpos = -285
slideoutLeft()
}
}
function slideoutLeft() {
if (slideoutShown.xpos > -285) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}
function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0
}
}
function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}
/* 이곳에서 전체 메뉴의 위치와 속성을 설정하세요 */
#Layer1 {position:absolute; left:0; top:0; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
/* 위에서 전체 메뉴의 위치와 속성을 설정하세요 */
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}
#ContentsLayer {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#ContentsLayer1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#ContentsLayer2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#ContentsLayer3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#ContentsLayer4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#ContentsLayer5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
//-->
</STYLE>
</HEAD>
<!--2. BODY 태그내에 onload="init()" 복사해 넣으세요-->
<BODY onLoad="init()">
<!--3. BODY 부분에 아래의 스크립트를 복사해 넣으세요-->
<DIV ID="Layer1">
<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">이신디</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">그누보드</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">LINK 3</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">LINK 4</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">LINK 5</A></P></DIV>
<DIV ID="ContentsLayer">
<DIV ID="ContentsLayer1">
<P ALIGN="CENTER"><a href=http://esindi.com><STRONG>이신디</STRONG></a>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
최고의 커뮤니티 이신디를 모르시나요?<br>
매일 매일 업데이트 됩니다<br>
이신디 닷컴<br>
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer2">
<P ALIGN="CENTER"><STRONG>LINK 2</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
최강 보드를 알고 있나요??
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer3">
<P ALIGN="CENTER"><STRONG>LINK 3</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
세번째 링크에 대한 설명입니다
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer4">
<P ALIGN="CENTER"><STRONG>LINK 4</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
네번째 링크에 대한 설명입니다
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer5">
<P ALIGN="CENTER"><STRONG>LINK 5</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
다섯번째 링크에 대한 설명입니다
</TD></TABLE>
</P>
</DIV>
</DIV>
</BODY>
</HTML>
<HEAD>
<TITLE> 최강 이신디 or 그누보드 </TITLE>
<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. 없으면 그냥 두세요-->
<SCRIPT LANGUAGE="JavaScript">
// 크로스 브라우저 설정
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
slideoutActive = 0
if (n) {
slideout1 = document.Layer1.document.ContentsLayer.document.ContentsLayer1
slideout2 = document.Layer1.document.ContentsLayer.document.ContentsLayer2
slideout3 = document.Layer1.document.ContentsLayer.document.ContentsLayer3
slideout4 = document.Layer1.document.ContentsLayer.document.ContentsLayer4
slideout5 = document.Layer1.document.ContentsLayer.document.ContentsLayer5
}
if (ie) {
slideout1 = ContentsLayer1.style
slideout2 = ContentsLayer2.style
slideout3 = ContentsLayer3.style
slideout4 = ContentsLayer4.style
slideout5 = ContentsLayer5.style
}
slideoutShown = slideout1
slideoutShown.xpos = 0
slideoutNew = "none"
slideoutNew.xpos = -285
}
function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1
slideoutNew = which
slideoutNew.xpos = -285
slideoutLeft()
}
}
function slideoutLeft() {
if (slideoutShown.xpos > -285) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}
function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0
}
}
function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}
/* 이곳에서 전체 메뉴의 위치와 속성을 설정하세요 */
#Layer1 {position:absolute; left:0; top:0; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
/* 위에서 전체 메뉴의 위치와 속성을 설정하세요 */
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}
#ContentsLayer {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#ContentsLayer1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#ContentsLayer2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#ContentsLayer3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#ContentsLayer4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#ContentsLayer5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
//-->
</STYLE>
</HEAD>
<!--2. BODY 태그내에 onload="init()" 복사해 넣으세요-->
<BODY onLoad="init()">
<!--3. BODY 부분에 아래의 스크립트를 복사해 넣으세요-->
<DIV ID="Layer1">
<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">이신디</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">그누보드</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">LINK 3</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">LINK 4</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">LINK 5</A></P></DIV>
<DIV ID="ContentsLayer">
<DIV ID="ContentsLayer1">
<P ALIGN="CENTER"><a href=http://esindi.com><STRONG>이신디</STRONG></a>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
최고의 커뮤니티 이신디를 모르시나요?<br>
매일 매일 업데이트 됩니다<br>
이신디 닷컴<br>
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer2">
<P ALIGN="CENTER"><STRONG>LINK 2</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
최강 보드를 알고 있나요??
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer3">
<P ALIGN="CENTER"><STRONG>LINK 3</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
세번째 링크에 대한 설명입니다
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer4">
<P ALIGN="CENTER"><STRONG>LINK 4</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
네번째 링크에 대한 설명입니다
</TD></TABLE>
</P>
</DIV>
<DIV ID="ContentsLayer5">
<P ALIGN="CENTER"><STRONG>LINK 5</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
다섯번째 링크에 대한 설명입니다
</TD></TABLE>
</P>
</DIV>
</DIV>
</BODY>
</HTML>
추천
0
0
댓글 전체
잘 쓰겠습니다. ^^
와우, 감사합니다.
이쁘네요... ^^
이야... 잘만쓰면 정말 이쁘겠네요.