묻고답하기
창크기에따라변하는서브메뉴
2002.03.28 04:55
창크기에 따라 서브메뉴들이 위치가 자꾸 변하는데요
이거 어떻게 고정시킬방법이 없을까요?
파일을 올려야 하는데 어떻게 하죠?
소스를 요기에 올리면 되나요?
올려볼께요...
<!--여기서부터 카피해 head .. /head 내에 넣어줍니다---->
<style type="text/css">
/*링크의 속성*/
a { font-size:10pt; color:#B3F0F8; text-decoration: none }
/*링크 롤 오버시의 속성*/
a:hover {color: red; text-decoration: underline }
/* 주메뉴 링크의 롤오버 속성*/
a.plain:hover { font-size:10pt; text-decoration: underline }
#box { position:absolute; visibility:hidden; layer-background-color:#757AE4 }
/*서브메뉴 박스의 바탕색상*/
#bluebox {background-color:#A0A0A0;}
/*메뉴 텍스트의 속성*/
#mnubar {font:10pt arial; font-weight:bold }
</style>
<script language="JavaScript">
<!---Javascript Hide
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"
function openIt(x) {
// NS 에서
if(ns) {
showbox= document.layers[x+1]
showbox.visibility = "show";
showbox.top=22;
var items = 6 ; // 주 메뉴의 총 수량을 설정
for (i=1; i<=items; i++) {
elopen=document.layers[i]
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}
//IE 에서
if(ie) {
curEl = event.toElement
curEl.style.background = "white" // 마우스를 메뉴텍스트에 올릴때 텍스트의 배경색상
showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.top = 20; // 주 메뉴와 서브메뉴 사이의 여백(서브 메뉴의 위쪽 여백)
var items = 6 // 주 메뉴의 총 수량을 설정
for (i=0; i<items; i++) {
elOpen=document.all.box[i]
barEl=document.all.mnubar[i]
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "#757AE4" // 비활성(마우스를 올리지 않았을때)상태에서의 메뉴바 바탕색상
}
}
}
}
function closeIt() {
var items = 6 // 주 메뉴의 총 수량을 설정
for (i=0; i<items; i++) {
if(ie){
document.all.box[i].style.visibility = "hidden"
barEl=document.all.mnubar[i]
barEl.style.background = "#757AE4"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
//---- end script ---->
</script>
<!--여기까지가 head 스크립트--->
</head>
<BODY BGCOLOR="#FFFFFF" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<!-- <BODY> 와 </BODY> 사이에 아래와 같이 테이블을 이용해 주 메뉴를 만든다 ---->
<table border="0" cellpadding="0" width="600" bgcolor="#757AE4" height="18" id=mainmenu align=center>
<tr>
<td align="center" >
<a href="#" onmouseover="closeIt()" class=plain>홈으로</a></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Menu 3</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Menu 4</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(4)" id=mnubar>Menu 5</a><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(5)" id=mnubar>Menu 6</a><br></td>
<td align="center" width="30" nowrap valign="top">
</td> </tr>
</table>
<br><br>
<!-- 아래와 같이 위의 주 메뉴에 대한 서브메뉴를 만든다 --->
<!-- 첫번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:80> <!--왼쪽에서 80픽셀만큼 마진값 주기-->
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='+ '+ 'http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 두번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:230>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 세번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:340>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 네번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:480>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 다섯번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:650>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 여섯번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:760>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!--여기까지----->
이거 어떻게 고정시킬방법이 없을까요?
파일을 올려야 하는데 어떻게 하죠?
소스를 요기에 올리면 되나요?
올려볼께요...
<!--여기서부터 카피해 head .. /head 내에 넣어줍니다---->
<style type="text/css">
/*링크의 속성*/
a { font-size:10pt; color:#B3F0F8; text-decoration: none }
/*링크 롤 오버시의 속성*/
a:hover {color: red; text-decoration: underline }
/* 주메뉴 링크의 롤오버 속성*/
a.plain:hover { font-size:10pt; text-decoration: underline }
#box { position:absolute; visibility:hidden; layer-background-color:#757AE4 }
/*서브메뉴 박스의 바탕색상*/
#bluebox {background-color:#A0A0A0;}
/*메뉴 텍스트의 속성*/
#mnubar {font:10pt arial; font-weight:bold }
</style>
<script language="JavaScript">
<!---Javascript Hide
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"
function openIt(x) {
// NS 에서
if(ns) {
showbox= document.layers[x+1]
showbox.visibility = "show";
showbox.top=22;
var items = 6 ; // 주 메뉴의 총 수량을 설정
for (i=1; i<=items; i++) {
elopen=document.layers[i]
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}
//IE 에서
if(ie) {
curEl = event.toElement
curEl.style.background = "white" // 마우스를 메뉴텍스트에 올릴때 텍스트의 배경색상
showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.top = 20; // 주 메뉴와 서브메뉴 사이의 여백(서브 메뉴의 위쪽 여백)
var items = 6 // 주 메뉴의 총 수량을 설정
for (i=0; i<items; i++) {
elOpen=document.all.box[i]
barEl=document.all.mnubar[i]
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "#757AE4" // 비활성(마우스를 올리지 않았을때)상태에서의 메뉴바 바탕색상
}
}
}
}
function closeIt() {
var items = 6 // 주 메뉴의 총 수량을 설정
for (i=0; i<items; i++) {
if(ie){
document.all.box[i].style.visibility = "hidden"
barEl=document.all.mnubar[i]
barEl.style.background = "#757AE4"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
//---- end script ---->
</script>
<!--여기까지가 head 스크립트--->
</head>
<BODY BGCOLOR="#FFFFFF" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<!-- <BODY> 와 </BODY> 사이에 아래와 같이 테이블을 이용해 주 메뉴를 만든다 ---->
<table border="0" cellpadding="0" width="600" bgcolor="#757AE4" height="18" id=mainmenu align=center>
<tr>
<td align="center" >
<a href="#" onmouseover="closeIt()" class=plain>홈으로</a></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Menu 3</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Menu 4</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(4)" id=mnubar>Menu 5</a><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(5)" id=mnubar>Menu 6</a><br></td>
<td align="center" width="30" nowrap valign="top">
</td> </tr>
</table>
<br><br>
<!-- 아래와 같이 위의 주 메뉴에 대한 서브메뉴를 만든다 --->
<!-- 첫번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:80> <!--왼쪽에서 80픽셀만큼 마진값 주기-->
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='+ '+ 'http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 두번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:230>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 세번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:340>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 네번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:480>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 다섯번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:650>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!-- 여섯번째 주메뉴에 대한 서브메뉴 -->
<div id=box style=left:760>
<table border="0" id=bluebox >
<tr><td><a href='#' >서브메뉴 1</a> </td>
<td><a href='http://...'>서브메뉴 2 </a></td>
<td><a href='http://...'>서브메뉴 3 </a></td>
</tr></table>
</div>
<!--여기까지----->
댓글 3
-
Legend
2002.03.28 20:26
-
꼬랑지
2002.03.28 20:44
감사하긴 한데요...잘 모르겠네요ㅡ,.ㅡ
어디에 제가 필요로 하는소스가 없을까요?ㅜ,.ㅜ -
Legend
2002.03.29 11:36
일단 레이어 별로 화면의 중앙을 기준으로 레이어에 위치를 지정하는 속성을 하나 만들고(사용자 속성)
그 속성을 CSS스타일에서 behavior나 expression 메쏘드를 이용하여 위치속성을 읽은 후(getAttribue메쏘드) 레이어별로 상대적으로 위치를 계산해서 left값을 지정하는 방법으로 하시면 될 듯하네요...(clientWidth속성을 이용 상대적 위치 계산)