웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
플래시느낌의 유동적인 메뉴
2003.11.13 00:16
미리보기 >> 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
===================================================================
<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
댓글 9
-
김도훈
2003.11.13 02:23
-
아이스맨
2003.11.13 11:21
저도 똑같은 현상이 일어납니다. -
superjam
2003.11.13 13:42
http://my.dreamwiz.com/jsreference/kimsNewIndex.htm<--------- 이곳에 가시면 더 많은것을 얻을 수 있슴니다..(참고로 저의 사이트는 아닙니다...)또한 익스플러러 차이에서 그런 현상이 있을 수 있슴니다...그곳에서 해답이 있슴니다. -
onseven
2003.11.13 17:23
위에 게시판 원칙을 읽어보셨으면...;; -
superjam
2003.11.13 17:29
onseven/전 강의가 아닙니다..김도훈/아이스맨/두 님의 현상을 바로 잡자는 뜻이었고, 또한 제가 강의를 하고자한것이 아닙니다..오해 없으시길... 만일 전에게 한말이 아니라면 미안하구요.... -
Root
2003.11.13 18:33
요즘에 세상 돌아가는걸 보아하니...
자바 애플릿 -> 플래시 -> 플래시 + 자바스크립트 순으로 돌아가는것 같군요.... -_-;; -
PlAyA
2003.12.03 22:53
아~ 자바 너무어렵다.. 차라리 플래시가 쉬운데.. -
박정호
2003.12.09 01:00
ㅝ 자바스크립트로 이런걸;;; -
*LEV*
2004.02.23 23:39
신의키스에서 다운받아 사용했는데..nzeo에도 있군요...http://my.dreamwiz.com/jsreference/kimsNewIndex.htm가제작자더구여..지금 수정해서 잘사용하고있습니다.추천 한방할께요.
사이트제작중 http://juhyun.org
제목 | 글쓴이 | 날짜 |
---|---|---|
트랙백 구현하기 - 2. 트랙백의 형식
![]() | TheMics | 2004.04.22 |
트랙백 구현하기 - 2. 트랙백의 형식
![]() | TheMics | 2004.04.22 |
PHP5 RC2 Released. [4] | 써니루루☆ | 2004.04.27 |
PHP 4에서 PHP 5로 이행 [5] | 이종현 | 2004.04.30 |
포털사이트 처럼 시스템 점검중 만들기 [3] | http://zentoo.com | 2004.05.14 |
팁 아닌 팁 한달전... | http://zentoo.com | 2004.05.15 |
[국밥PHP] 1-1(1). 개념정리 Break Time (Build 1) [7] | 9000㎒ | 2004.05.18 |
PHP로 구현하는 음악 감상실
[9]
![]() | 컴도미 | 2004.05.21 |
초간단 설문조사 소스 [3] | 이혁 | 2004.05.27 |
해당 ftp 파일 서버에서 다른곳의 ftp 파일 서버로 백업용도 및 전송하기.. [9] | 김동욱 | 2004.05.30 |
초간단 스팸방지 하면서 곧바로 메일 보내기 [3] | U2em | 2004.05.31 |
윈도우계정에서 현재 남은 용량과 DB 용량 알기
[6]
![]() | 지으니 | 2004.05.31 |
주식정보출력코드 [2] | 김재경 | 2004.06.01 |
1. 연산자 [2] | 티다 | 2004.06.02 |
2. array [5] | 티다 | 2004.06.02 |
게시판내용에 코멘트를 달자!! [3] | 헉스 | 2004.06.02 |
게시판내용에 코멘트를 달자!! -2- [1] | 헉스 | 2004.06.02 |
게시판내용에 코멘트를 달자!! -마지막- [2] | 이혁 | 2004.06.03 |
응용편 - BMI 측정 테스트 소스를 만들어보자 [5] | 티다 | 2004.06.04 |
3. if문 [13] | 티다 | 2004.06.05 |
메뉴1~5 사이트를 가로로 빠르게 움직이면 전부 활성화되면서 멎어버립니다 -_-;