묻고답하기
위에서 슬라이딩되어 내려오는 레이어 숫자 늘리기
2005.07.30 17:29
위에서 슬라이딩되어 내려오는 레이어 메뉴입니다.
가로 방향으로 레이어(div) 3~4개 추가 하고 싶은데 잘 안되네요.
숫자부분을 div별로 조정해 주면 될 것 같은데 계속 실패만 하고 있습니다.
어찌해야 쓸까요? 힌트라두 좀 주심 고맙겠네요.
********소스******************
<html>
<head>
<title>sliding layer</title>
<script language="JavaScript">
<!--
function check(overOrout) {
style = menu.style;
if (overOrout) {
actionCheck = 1;
setTimeout("move(1);", 1);
}
else {
actionCheck = 0;
setTimeout("move(0);", 1);
}
}
function move(overOrout) {
if (overOrout && actionCheck) {
if (style.pixelTop < -5) {
style.pixelTop += 10;
setTimeout("move(1)",1);
}
}
else {
if (!actionCheck && style.pixelTop > -108) {
style.pixelTop -= 10;
setTimeout("move(0)",1);
}
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#ff0000">
<div style="position:absolute;left:0;top:-108;visibility:visible;" onmouseover="check(1);" onmouseout="check(0);" id="menu">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">방명록</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">게시판</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">자료실</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">디자인</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">스터디</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">프로필</a></td>
</tr><tr>
<td align="center" bgcolor="#ff0000">메뉴</td>
</tr>
</table></div>
</body>
</html>
가로 방향으로 레이어(div) 3~4개 추가 하고 싶은데 잘 안되네요.
숫자부분을 div별로 조정해 주면 될 것 같은데 계속 실패만 하고 있습니다.
어찌해야 쓸까요? 힌트라두 좀 주심 고맙겠네요.
********소스******************
<html>
<head>
<title>sliding layer</title>
<script language="JavaScript">
<!--
function check(overOrout) {
style = menu.style;
if (overOrout) {
actionCheck = 1;
setTimeout("move(1);", 1);
}
else {
actionCheck = 0;
setTimeout("move(0);", 1);
}
}
function move(overOrout) {
if (overOrout && actionCheck) {
if (style.pixelTop < -5) {
style.pixelTop += 10;
setTimeout("move(1)",1);
}
}
else {
if (!actionCheck && style.pixelTop > -108) {
style.pixelTop -= 10;
setTimeout("move(0)",1);
}
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#ff0000">
<div style="position:absolute;left:0;top:-108;visibility:visible;" onmouseover="check(1);" onmouseout="check(0);" id="menu">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">방명록</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">게시판</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">자료실</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">디자인</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">스터디</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">프로필</a></td>
</tr><tr>
<td align="center" bgcolor="#ff0000">메뉴</td>
</tr>
</table></div>
</body>
</html>
해결해볼려고 했는데 잘안되네요.
빠르게 메뉴에서 벗어났을경우 좀 어렵네요
<html>
<head>
<title>sliding layer</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#ff0000">
<div style="position:absolute;visibility:visible;" id="menu1">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">방명록</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">게시판</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">자료실</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">디자인</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">스터디</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">프로필</a></td>
</tr><tr>
<td align="center" bgcolor="#ff0000">메뉴</td>
</tr>
</table></div>
<div style="position:absolute;visibility:visible;" id="menu2">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">방명록</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">게시판</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">자료실</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">디자인</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">스터디</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">프로필</a></td>
</tr><tr>
<td align="center" bgcolor="#ff0000">메뉴</td>
</tr>
</table></div>
<div style="position:absolute;visibility:visible;" id="menu3">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">방명록</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">게시판</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">자료실</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">디자인</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">스터디</a></td>
</tr><tr>
<td align="center" bgcolor="#c0c0c0"><a href="#">프로필</a></td>
</tr><tr>
<td align="center" bgcolor="#ff0000">메뉴</td>
</tr>
</table></div>
<script language="JavaScript">
<!--
function MenuControl( Obj /*, GripHeight */ ){
MenuControl.Objs[MenuControl.Objs.length] = this;
this.ObjIndex = MenuControl.Objs.length-1;
this.Style = Obj.style;
this.Obj = Obj;
var thisObj = this;
Obj.onmouseover = function(){
if( Obj.contains( event.toElement ) )
MenuControl.Objs[thisObj.ObjIndex].Move();
}
Obj.onmouseout = function(){
if( !Obj.contains( event.toElement ) )
MenuControl.Objs[thisObj.ObjIndex].Move2();
}
this.ObjHeight = Obj.offsetHeight;
this.ObjWidth = Obj.offsetWidth;
if( arguments[1] )
this.GripHeight = arguments[1];
this.Style.pixelLeft = this.ObjWidth * this.ObjIndex;
this.Style.pixelTop = "-"+this.ObjHeight;
this.Style.pixelTop += this.GripHeight;
}
MenuControl.Objs = [];
MenuControl.prototype.Move = function(){
if( this.Timer2 != null )
clearTimeout( this.Timer2 );
if ( this.Style.pixelTop < 0) {
this.Style.pixelTop -= this.Style.pixelTop/2;
this.Timer1 = setTimeout("MenuControl.Objs["+this.ObjIndex+"].Move()",1);
}else{
clearTimeout( this.Timer2 );
clearTimeout( this.Timer1 );
}
return;
}
MenuControl.prototype.Move2 = function(){
if( this.Timer1 != null )
clearTimeout( this.Timer1 );
if ( this.Style.pixelTop >= parseInt( -(this.ObjHeight-this.GripHeight) )) {
if( (Step = ((this.ObjHeight-this.GripHeight)-(-this.Style.pixelTop))/2 ) < 1 )
Step = 1;
this.Style.pixelTop -= Step;
this.Timer2 = setTimeout("MenuControl.Objs["+this.ObjIndex+"].Move2()",1);
}else{
clearTimeout( this.Timer2 );
clearTimeout( this.Timer1 );
}
return;
}
MenuControl.prototype.Timer1 = null;
MenuControl.prototype.Timer2 = null;
MenuControl.prototype.Style = null;
MenuControl.prototype.Obj = null;
MenuControl.prototype.ObjIndex = null;
MenuControl.prototype.ObjHeight = null;
MenuControl.prototype.ObjWidth =null;
MenuControl.prototype.GripHeight = 20;
new MenuControl( menu1 );
new MenuControl( menu2 );
new MenuControl( menu3 );
//-->
</script>
</body>
</html>