묻고답하기
서브메뉴 할 때 각 자 위치를 다르게 하고 싶습니다
2005.07.29 20:39
<head><!---- 여기서부터 카피해 head ... /head 사이에 넣어준다--->
<STYLE type=text/css>
<!--
/*주메뉴 포지션*/
.main { position: absolute; LEFT: 18px; TOP: 44px; Z-INDEX: 2; visibility:show; }
/*서브메뉴의 포지션*/
.submenu { position: absolute; LEFT: 18px; TOP: 45px; font-size:9pt; Z-INDEX: 2; visibility:hidden; }
/*링크속성*/
A.b:link {color: orange; font-family: 굴림; font-size: 9pt; text-decoration: none; }
a:link {color: 9FAFFF; font-family: 굴림; font-size: 9pt; text-decoration: none;}
a:visited {color: red; font-family: 굴림; font-size: 9pt;text-decoration: none;}
a:hover {color: #ffffff; background: #505050; font-family: verdana, arial, helvetica; font-size: 9pt; text-decoration: none;}
-->
</STYLE>
<SCRIPT language=javascript>
<!--
var i,current;
var running = 0;
var n,i,startLeft,endLeft;
var moveX = new Array(1.00, 0.85, 0.64, 0.48, 0.37, 0.28, 0.21, 0.16, 0.12, 0.09, 0.068, 0.05, 0.036, 0.022, 0.01, 0.00);
function rollOver(name){
hidelayer();
changeState(name+'menu','visible');
}
function rollOut(name){
}
function changeState(layerRef,state){
evallayer="document"+".all"+"['"+layerRef+"']"+".style"+".visibility='"+state+"'";
if(current != layerRef)
{
current = layerRef;
running = 1;
n = -1;
i = 450; //레이어 전체폭
startLeft = 630; // 스크롤 시작위치
endLeft = 250; // 서브메뉴의 정지위치(윈도우 왼쪽 틀을 기준)
eval(evallayer);
moveLayer(i,layerRef);
} else {
eval(evallayer);
}
}
function moveLayer(i,layerRef){
evallayer="document"+".all"+"['"+layerRef+"']"+".style"+".left="+i;
if((i>endLeft) && (running==1) && (current==layerRef))
{
n++;
i = (startLeft*moveX[n])+endLeft;
eval(evallayer);
setTimeout('moveLayer('+i+',"'+layerRef+'")',25);
}
else if((running==1) && (current==layerRef))
{
running = 0;
}
}
//레이어 숨기기
function hidelayer(){
eval("document"+".all"+"['irp1menu']"+".style"+".visibility='hidden'");
eval("document"+".all"+"['irp2menu']"+".style"+".visibility='hidden'");
eval("document"+".all"+"['irp3menu']"+".style"+".visibility='hidden'");
eval("document"+".all"+"['irp4menu']"+".style"+".visibility='hidden'");
// 설정 메뉴에 따라 추가...
}
// -->
</script>
<!--여기까지 head 스크립트--->
</HEAD>
<body bgcolor=#ffffff scroll=no> <!-- 바탕색 저는 블랙으로 했습니다 -->
<div id="menu" name="menu">
<!--***** 주 메뉴 만들기 *****-->
<table BORDER=0 width=600 cellpadding="0" cellspacing="0">
<tr>
<td width=40> </td>
<td></td>
<td><a class="b" href="메인주소">메인</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp1');" onmouseout="rollOut('irp1');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp2');" onmouseout="rollOut('irp2');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp3');" onmouseout="rollOut('irp3');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp4');" onmouseout="rollOut('irp4');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="방명록주소">방명록</a></td>
</tr></table>
</div>
<div class="submenu "id="irp1menu" name="irp1sub">
<table BORDER=0 width=450 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<div class="submenu" id="irp2menu" name="irp2sub">
<table BORDER=0 width=310 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<div class="submenu" id="irp3menu" name="irp3sub">
<table BORDER=0 width=200 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<div class="submenu" id="irp4menu" name="irp4sub">
<table BORDER=0 width=500 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<!--- 여기까지 소스 --->
이 소스를 적용시키면 주메뉴 밑에 서브메뉴가 나오긴 하지만, 서브메뉴1,서브메뉴2,서브메뉴3,서브메뉴4 모두가 똑같은 위치에서 고정됩니다.
저는 주메뉴1 밑에 서브메뉴1 을... 주메뉴2 밑에 서브메뉴2 를... 주메뉴3 밑에 서브메뉴3 을... 주메뉴4 밑에 서브메뉴4 를 위치시키고 싶습니다.
어떻게 해야 하나요 ??
<STYLE type=text/css>
<!--
/*주메뉴 포지션*/
.main { position: absolute; LEFT: 18px; TOP: 44px; Z-INDEX: 2; visibility:show; }
/*서브메뉴의 포지션*/
.submenu { position: absolute; LEFT: 18px; TOP: 45px; font-size:9pt; Z-INDEX: 2; visibility:hidden; }
/*링크속성*/
A.b:link {color: orange; font-family: 굴림; font-size: 9pt; text-decoration: none; }
a:link {color: 9FAFFF; font-family: 굴림; font-size: 9pt; text-decoration: none;}
a:visited {color: red; font-family: 굴림; font-size: 9pt;text-decoration: none;}
a:hover {color: #ffffff; background: #505050; font-family: verdana, arial, helvetica; font-size: 9pt; text-decoration: none;}
-->
</STYLE>
<SCRIPT language=javascript>
<!--
var i,current;
var running = 0;
var n,i,startLeft,endLeft;
var moveX = new Array(1.00, 0.85, 0.64, 0.48, 0.37, 0.28, 0.21, 0.16, 0.12, 0.09, 0.068, 0.05, 0.036, 0.022, 0.01, 0.00);
function rollOver(name){
hidelayer();
changeState(name+'menu','visible');
}
function rollOut(name){
}
function changeState(layerRef,state){
evallayer="document"+".all"+"['"+layerRef+"']"+".style"+".visibility='"+state+"'";
if(current != layerRef)
{
current = layerRef;
running = 1;
n = -1;
i = 450; //레이어 전체폭
startLeft = 630; // 스크롤 시작위치
endLeft = 250; // 서브메뉴의 정지위치(윈도우 왼쪽 틀을 기준)
eval(evallayer);
moveLayer(i,layerRef);
} else {
eval(evallayer);
}
}
function moveLayer(i,layerRef){
evallayer="document"+".all"+"['"+layerRef+"']"+".style"+".left="+i;
if((i>endLeft) && (running==1) && (current==layerRef))
{
n++;
i = (startLeft*moveX[n])+endLeft;
eval(evallayer);
setTimeout('moveLayer('+i+',"'+layerRef+'")',25);
}
else if((running==1) && (current==layerRef))
{
running = 0;
}
}
//레이어 숨기기
function hidelayer(){
eval("document"+".all"+"['irp1menu']"+".style"+".visibility='hidden'");
eval("document"+".all"+"['irp2menu']"+".style"+".visibility='hidden'");
eval("document"+".all"+"['irp3menu']"+".style"+".visibility='hidden'");
eval("document"+".all"+"['irp4menu']"+".style"+".visibility='hidden'");
// 설정 메뉴에 따라 추가...
}
// -->
</script>
<!--여기까지 head 스크립트--->
</HEAD>
<body bgcolor=#ffffff scroll=no> <!-- 바탕색 저는 블랙으로 했습니다 -->
<div id="menu" name="menu">
<!--***** 주 메뉴 만들기 *****-->
<table BORDER=0 width=600 cellpadding="0" cellspacing="0">
<tr>
<td width=40> </td>
<td></td>
<td><a class="b" href="메인주소">메인</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp1');" onmouseout="rollOut('irp1');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp2');" onmouseout="rollOut('irp2');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp3');" onmouseout="rollOut('irp3');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="Javascript:alert('클릭한 후에 할말');" onmouseover="rollOver('irp4');" onmouseout="rollOut('irp4');">주 메뉴 제목</a></td>
<td></td>
<td><a class="b" href="방명록주소">방명록</a></td>
</tr></table>
</div>
<div class="submenu "id="irp1menu" name="irp1sub">
<table BORDER=0 width=450 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<div class="submenu" id="irp2menu" name="irp2sub">
<table BORDER=0 width=310 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<div class="submenu" id="irp3menu" name="irp3sub">
<table BORDER=0 width=200 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<div class="submenu" id="irp4menu" name="irp4sub">
<table BORDER=0 width=500 cellpadding="0" cellspacing="0"><tr>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
<td></td>
<td><a href="링크할 문서">서브 메뉴 제목</a></td>
</tr></table>
</div>
<!--- 여기까지 소스 --->
이 소스를 적용시키면 주메뉴 밑에 서브메뉴가 나오긴 하지만, 서브메뉴1,서브메뉴2,서브메뉴3,서브메뉴4 모두가 똑같은 위치에서 고정됩니다.
저는 주메뉴1 밑에 서브메뉴1 을... 주메뉴2 밑에 서브메뉴2 를... 주메뉴3 밑에 서브메뉴3 을... 주메뉴4 밑에 서브메뉴4 를 위치시키고 싶습니다.
어떻게 해야 하나요 ??