웹마스터 팁

  2. Support
  3. 웹마스터 팁

레이어 3 - 메뉴판때기.

2004.07.04 14:26

미친개



레이어 세번째 얘긴 클립을 이용한 메뉴판때기입니다.
좌우로 긴 레이어에 네개의 테이블을 만들어 각각의 테이블에
아이프렘을 넣고 페이지를 불러옵니다.
그리고 이 레이어에 작은 구멍을 클립 속성으로 만들어주죠.

좌우로 긴 레이어를 왔다리 갔다리 하면서 원하는 페이지를
보여주는 메뉴판때기입니다.


레이어가 이동중에 다시 같은 방향을 클릭하면 속도가 두배가
됩니다. 이걸 방지하기 위해 일종의 flag 변수인 sliding 변수를
정의해줍니다.
소스는 그다지 어렵지 않습니다.

미리 보기 : http://allzza.net/xxx/aboard.php?id=pds&dbf=12&mode=source





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>레이어 이동 - 1 </title>

<SCRIPT LANGUAGE="JavaScript">
<!--


/**************************************
제작 : 미친개
수정과 사용, 재배포에서 자유롭습니다.
학습용으로 쓰시길 권합니다.
**************************************/



sliding = false;
function slide(posi) {
    key = posi;
    if(parseInt(document.all.maddog1.style.left) >(-1)*key) slideleft();
    else slideright();
    }

function slideleft()  {
  sliding = true;
  i = parseInt(document.all.maddog1.style.left);
        if (i > key*(-1)){
                i -= 10;
                document.all.maddog1.style.left = i;
                setTimeout("slideleft()",1);
        }
else sliding = false;
}

function slideright()  {
  sliding = true;
  i = parseInt(document.all.maddog1.style.left);
        if (i < key*(-1)){
                i += 10;
                document.all.maddog1.style.left = i;
                setTimeout("slideright()",1);
        }
else sliding = false;
}


//-->
</SCRIPT>
</head>

<BODY bgcolor=#9c9c9c scroll=no>



<div id='mylayer' style='position:absolute; left:110px; top:100px; width:614; hgight=410; clip:rect(0,616,420,0);layer-background-color:#000000';>
<DIV ID="maddog1" STYLE="position:absolute; left:0px; top:0px; width:3060px; height:420px;background-color:#000000;">


<DIV ID="home" STYLE="position:absolute; left:5px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td align=center bgcolor=#0000ff width=610 height=405>
<iframe src=http://nzeo.com width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>


<DIV ID="pds" STYLE="position:absolute; left:615px; top:5px; width:600px; height:400px;">
<table>
<tr>
<td bgcolor=#ff00ff width=600 height=400>
<iframe src=http://allzza.net width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>



<DIV ID="mds" STYLE="position:absolute; left:1225px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td bgcolor=#00ffff width=600 height=400>
<iframe src=http://tagmania.net width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>



<DIV ID="js" STYLE="position:absolute; left:1835px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td>
<iframe src=http://naver.com width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>


<DIV ID="board" STYLE="position:absolute; left:2445px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td>
<iframe src=http://kr.yahoo.com width=600 height=400 scrolling=auto></iframe>
</td></tr>
</table>
</DIV>

</div>
</div>


<div style='position:absolute;left:780;top:100;width:70;height:420;visibility:visible;'>
<table border=2 width=100% height=100% bordercolor=000000>
<tr><td>
<A HREF="javascript:if(!sliding) slide(0)">엔지오</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(610)">알짜넷</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(1220)">태그매니아</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(1830)">네이버</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(2440)">야후코리아</A>
</td></tr>
</table>
</div>




</body>
</html>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
MS홈에 쓰이는 오른쪽메뉴 툴바 [13] file Kortion 2003.02.22
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] 이남두 2003.02.26
엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] 스티치 2003.03.29
간단한 점프메뉴(selecter) [14] 박재현 2003.04.14
메뉴이동입니다. [5] 데빌스텔스 2003.04.20
메뉴 옆에서 화살표가 스크롤되는.. [2] 힘찬연못 2003.05.29
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] 처절초보 2003.06.16
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] 처절초보 2003.06.16
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] 김주형 2003.07.03
[수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] 미니 2003.08.18
플레쉬 메뉴를 표방한..=ㅁ= 자바스크립트의 수작 버튼 밑으로 스크롤 되는 아이콘입니다. [47] beMax 2003.09.14
플래시느낌의 유동적인 메뉴 [9] jabusim 2003.11.13
오른버튼 누를때 메뉴 뜨게하기(깔끔버전) [5] file 럽 2003.12.09
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] 봉팀장 2003.12.30
[초간단 자바스크립트!] 색깔바뀌는 메뉴 [3] ∑Ztxy 2004.01.19
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] ∑Ztxy 2004.03.10
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.) [9] file tintintm 2004.03.23
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 ☺심심 2004.05.17
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] ∑Ztxy 2004.06.05
레이어 3 - 메뉴판때기. [1] 미친개 2004.07.04
태그 쓰기