웹마스터 팁

  2. Support
  3. 웹마스터 팁

플래시느낌의 유동적인 메뉴

2003.11.13 00:16

jabusim

미리보기 >> http://jabusim.com/tutorials/java/jabusim_overflowhidden.htm

===================================================================

<HTML><HEAD><TITLE>jabusim.com - overflow:hidden을 이용한 메뉴</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987">
<STYLE type=text/css>.mnu {
        FONT-SIZE: 9pt; BACKGROUND: #424242; COLOR: white; FONT-FAMILY: verdana; TEXT-ALIGN: center
}
.subTD {
        FONT-SIZE: 9pt; BACKGROUND: #e71018; CURSOR: default; COLOR: white; FONT-FAMILY: verdana; TEXT-ALIGN: center
}
#container {
        BORDER-RIGHT: white 2px solid; BORDER-TOP: black 2px solid; BORDER-LEFT: black 2px solid; BORDER-BOTTOM: white 2px solid
}
</STYLE>

<SCRIPT language=javascript>

var menuText2=new Array("Menu1","Menu2","Menu3","Menu4","Menu5");
var menuText1=new Array("메뉴1","메뉴2","메뉴3","메뉴4","메뉴5");
var sub0=new Array("<a href=http://jabusim.com>jabusim.com1-1</a>","jabusim.com1-2","jabusim.com1-3");
var sub1=new Array("jabusim.com2-1","jabusim.com2-2","jabusim.com2-3");
var sub2=new Array("jabusim.com3-1","jabusim.com3-2","jabusim.com3-3","jabusim.com3-4");
var sub3=new Array("jabusim.com4-1","jabusim.com4-2","jabusim.com4-3");
var sub4=new Array("jabusim.com5-1","jabusim.com5-2","jabusim.com5-3","jabusim.com5-4");

var menuW=100;
var menuH=20;
var containerW=menuW*menuText1.length;
var xLim=new Array(menuText1.length);
var xGap=menuW;
var menu2W=menuW*2;
var menu2H=menuH*2;
var x=0;
var z=0;
var yPos=-menuH;
var subCw=containerW-2;
function otherBack(idx){
        for(i=0;i<menuText1.length;i++){
                eval("mnu" + i + ".style.pixelTop=yPos");
                for(j=0;j<eval("sub" + i + ".length");j++){
                        eval("subM" + i + ".style.pixelTop=menuH");
                }
        }
        
        moveDIV(idx);
        moveSUB(idx);
}


function moveDIV(idx){
        
        
        if(eval("mnu" + idx +".style.pixelTop") < 0){
                eval("mnu" + idx + ".style.pixelTop=mnu" + idx + ".style.pixelTop + 1");
                timer1=setTimeout("moveDIV(" + idx + ")",10);
        }else{
                eval("mnu" + idx + ".style.pixelTop=0");
                clearTimeout(timer1);
        }

}
function moveSUB(idx){
        if(eval("subM" + idx + ".style.pixelTop") > 0){
                eval("subM" + idx + ".style.pixelTop=subM" + idx + ".style.pixelTop - 1");
                timer2=setTimeout("moveSUB(" + idx + ")",10);
        }else{
                eval("subM" + idx + ".style.pixelTop=0");
                clearTimeout(timer2);
        }
}

</SCRIPT>

<META content="MSHTML 6.00.2800.1264" name=GENERATOR></HEAD>
<BODY>
<SCRIPT>
document.write("<div id='container' style='overflow:hidden;position:absolute;left:100;top:100;width:" + containerW + ";height:" + menuH + ";'>");
for(i=0;i<menuText1.length;i++){
        xPos=xGap*x;
        document.write("<div id='mnu"+ i +"' class=mnu style='cursor:default;position:absolute;left:"+ xPos + ";top:"+ yPos +";z-index:"+ z +";width:" + menuW+ ";height:"+ menu2H + ";'><span style='width:"+ menuW +";height:"+ menuH +";background:#E71018;color:white;'>"+ menuText1[i] +"</span><br><span onmouseover='otherBack("+ i +")' style='width:"+ menuW +";height:"+ menuH +";background:#424242;color:white;'>"+ menuText2[i] +"</span></div>");
        x++;
        z++;
}
document.write("</div>");

document.write("<div id='sub_container' style='position:absolute;left:100;top:118;width:"+ subCw + ";height:" + menuH + ";overflow:hidden;'>");
for(i=0;i<menuText1.length;i++){
        document.write("<div id='subM"+ i +"' style='position:absolute;left:0;top:"+ menuH + ";width:"+ containerW + ";height:" + menuH +";'>");
        document.write("<table width=" + subCw + " cellspacing=0 style='background:#424242'><tr>");
        for(j=0;j<eval("sub" + i +".length");j++){
                document.write("<td class='subTD'>"+ eval("sub" + i + "[j]") +"</td>");
        }
        document.write("</tr></table>");
        document.write("</div>");
}
document.write("</div>");
</SCRIPT>
</SCRIPT>
</BODY></HTML>

======================================================================================

재미있는 효과입니다. 서브에 링크도 걸 수 있습니다. 예제에는 한개만 걸어두었습니다.

조금만 응용하면 매우 좋은 소스가 될 것 같네요 참조하시고 그래도 안되시면
클릭! - >> http://jabusim.com/board/zboard/zboard.php?id=qanda 질문게시판에 남겨주세요.

또한 초보자분들을 위해서 php 강좌를 시작합니다. 더욱 알찬진 모습을 기대해주세요.
클릭! - >> http://jabusim.com/board/zboard/zboard.php?id=php"

잠깐 홍보 ^^; 부운영자 모집합니다. 많은 참여 바랍니다.
클릭! - >> http://jabusim.com/board/zboard/zboard.php?id=admin






이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
심플한 원단위를 콤마로 나타내주기 [2] zentoo.com 2003.11.11
플래시느낌의 유동적인 메뉴 [9] jabusim 2003.11.13
동영상 오른쪽 버튼 방지 소스 입니다... [9] 김성목 2003.11.15
자바로 만들어진 계산기 [1] 현규웅 2003.11.20
팝업공지창 다시 안뜨게 하는 소스[날짜지정가능] [17] lemin 2003.11.20
3D 효과의 원형 거울을 띄우자. [6] 줄리앙 2003.11.21
익스플로러에서 인쇄 누르면 페이지 이동.... [3] 조한웅 2003.11.28
크리스마스 날짜 카운터 [1] keymove 2003.12.04
소스연구1 테이블 자동으로 늘었다 커지기 태클환영 [9] 박한웅 2003.12.04
오른버튼 누를때 메뉴 뜨게하기(깔끔버전) [5] file 럽 2003.12.09
소스보기를 일부 차단하는 방법입니다. [12] Juny. 2003.12.12
들어갈때 시작페이지 설정하는거... [2] 쉿!비밀 2003.12.17
링크에 마우스를 올리면 배경 변하게 하는 소스 봉팀장 2003.12.30
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] 봉팀장 2003.12.30
[초간단 자바스크립트!] 아이프레임 이용한 이미지 갤러리(?) ∑Ztxy 2004.01.02
마우스 올리면 링크 텍스트를 무지개빛으로_12시20분 수정.;; [1] keymove 2004.01.06
아기창 자동으루 띄우고 엄마창 자동으루 죽이기 -_-;; [13] 후르츠 2004.01.09
[초간단 자바스크립트!] 홈페이지접속 시간,날짜 표시기 [3] ∑Ztxy 2004.01.09
Thinking In Java 2nd Edition file n25 2004.01.14
[초간단 자바스크립트(강의)!]나만의 익스플로러창 만들기[허접] [2] ∑Ztxy 2004.01.17
태그 쓰기