묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
스크롤 메뉴 질문입니다.
2006.04.15 05:19
http://nsw1221.hihome.com/ImportedFiles/myhome/java/java51.html안녕하세여~~
홈페이지 제작하다가
모르는게 있어 질문 드립니다.
일단 서브 메뉴를 만들려고 하는데여~~
소스(1) - 아래소스를 메모장에 복사하여 scrollmenu.js로 저장
function menuIn() {
if(n4) {
clearTimeout(out_ID)
if( menu.left > menuW*-1+30+10 ) { //20은 처음 마우스로 여는 공간. 10은 레이어 크기에 상관없이 정확히 배치시킨다.
menu.left -= 20
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.left > menuW*-1+30 ) {
menu.left--
in_ID = setTimeout("menuIn()", 1)
}
}
else {
clearTimeout(out_ID)
if( menu.pixelLeft > menuW*-1+30+10 ) {
menu.pixelLeft -= 10
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.pixelLeft > menuW*-1+30 ) {
menu.pixelLeft--
in_ID = setTimeout("menuIn()", 1)
}
}
}
function menuOut() {
if(n4) {
clearTimeout(in_ID)
if( menu.left < -10) {
menu.left += 4
out_ID = setTimeout("menuOut()",1)
}
else if( menu.left < 0) {
menu.left++
out_ID = setTimeout("menuOut()", 1)
}
}
else {
clearTimeout(in_ID)
if( menu.pixelLeft < -10) {
menu.pixelLeft += 2
out_ID = setTimeout("menuOut()", 1)
}
else if( menu.pixelLeft < 0 ) {
menu.pixelLeft++
out_ID = setTimeout("menuOut()", 1)
}
}
}
function fireOver() {
clearTimeout(F_out)
F_over = setTimeout("menuOut()", 10)
}
function fireOut() {
clearTimeout(F_over)
F_out = setTimeout("menuIn()", 10)
}
function init() {
if(n4) {
menu = document.D1
menuW = menu.document.width
menu.left = menuW*-1+30
document.D1.onmouseover = menuOut
document.D1.onmouseout = menuIn
menu.visibility = "visible"
}
else if(e4) {
menu = D1.style
menuW = D1.offsetWidth
D1.style.pixelLeft = menuW*-1+30
D1.onmouseover = fireOver
D1.onmouseout = fireOut
D1.style.visibility = "visible"
}
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
소스(2)
<style>
#D1 {
position:absolute; width:200px; left:0px; top:0px; border:outset 2px white;
background-color:lightgreen; layer-background-color:lightgreen; visibility:hidden;
}
<!--
a:link, a:visited, a:active {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
-->
</style>
<script language="JavaScript" src="../js/scrollmenu.js"></script>
위의 소스(2)를 <head>테그에 붙여 넣고요
여기서 주의 할점은 scrollmenu.js의 경로를 정확하게 표시해 주셔야 한다는 점입니다.
소스(3)
<body onLoad="init();">
<div id=D1>
<table border=0 width="216">
<tr><td width="183" align="center"><b style="color:green">[ MENU]</b></td>
<td width="23" rowspan=2 bgcolor="#00CC99" valign="middle">
<p align="center">M<br>o<br>u<br>s<br>e<br> <br>o<br>n<br> !
</td></tr>
<tr><td width="183">
<p align="center">
<a href="java51_2.html">Cyda1.jpg</a><br><br>
<a href="Java51_3.html">Cyda2.jpg</a><br><br>
<a href="Java51_4.html">Cyda3.jpg</a><br><br>
<a href="Java51.html">Return</a><br>
</td></tr>
</table>
</div>
</body>
소스(3)을 <body>테그 위치에 붙여넣고요
실행 하면 되는 건데여~~
실행 하면 서브 메뉴가 왼쪽에 자리 잡게 됩니다.
메뉴에다가 마우스를 살짝 갖다놓으면 옆으로 퍼지면서
보여지는겁니다.
제가 질문하고 싶은 부분은 바로 실행이 왼쪽이 아닌
오른쪽에서 실행 시킬수 있는 방법입니다.
이것저것 다 해봤는데 역시 실력이 모자라서 잘 안됩니다.
소스 1 을 수정하면 될것 같은데~~~
어떻게 하는지 알려주시기 부탁드립니다.
홈페이지 제작하다가
모르는게 있어 질문 드립니다.
일단 서브 메뉴를 만들려고 하는데여~~
소스(1) - 아래소스를 메모장에 복사하여 scrollmenu.js로 저장
function menuIn() {
if(n4) {
clearTimeout(out_ID)
if( menu.left > menuW*-1+30+10 ) { //20은 처음 마우스로 여는 공간. 10은 레이어 크기에 상관없이 정확히 배치시킨다.
menu.left -= 20
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.left > menuW*-1+30 ) {
menu.left--
in_ID = setTimeout("menuIn()", 1)
}
}
else {
clearTimeout(out_ID)
if( menu.pixelLeft > menuW*-1+30+10 ) {
menu.pixelLeft -= 10
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.pixelLeft > menuW*-1+30 ) {
menu.pixelLeft--
in_ID = setTimeout("menuIn()", 1)
}
}
}
function menuOut() {
if(n4) {
clearTimeout(in_ID)
if( menu.left < -10) {
menu.left += 4
out_ID = setTimeout("menuOut()",1)
}
else if( menu.left < 0) {
menu.left++
out_ID = setTimeout("menuOut()", 1)
}
}
else {
clearTimeout(in_ID)
if( menu.pixelLeft < -10) {
menu.pixelLeft += 2
out_ID = setTimeout("menuOut()", 1)
}
else if( menu.pixelLeft < 0 ) {
menu.pixelLeft++
out_ID = setTimeout("menuOut()", 1)
}
}
}
function fireOver() {
clearTimeout(F_out)
F_over = setTimeout("menuOut()", 10)
}
function fireOut() {
clearTimeout(F_over)
F_out = setTimeout("menuIn()", 10)
}
function init() {
if(n4) {
menu = document.D1
menuW = menu.document.width
menu.left = menuW*-1+30
document.D1.onmouseover = menuOut
document.D1.onmouseout = menuIn
menu.visibility = "visible"
}
else if(e4) {
menu = D1.style
menuW = D1.offsetWidth
D1.style.pixelLeft = menuW*-1+30
D1.onmouseover = fireOver
D1.onmouseout = fireOut
D1.style.visibility = "visible"
}
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
소스(2)
<style>
#D1 {
position:absolute; width:200px; left:0px; top:0px; border:outset 2px white;
background-color:lightgreen; layer-background-color:lightgreen; visibility:hidden;
}
<!--
a:link, a:visited, a:active {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
-->
</style>
<script language="JavaScript" src="../js/scrollmenu.js"></script>
위의 소스(2)를 <head>테그에 붙여 넣고요
여기서 주의 할점은 scrollmenu.js의 경로를 정확하게 표시해 주셔야 한다는 점입니다.
소스(3)
<body onLoad="init();">
<div id=D1>
<table border=0 width="216">
<tr><td width="183" align="center"><b style="color:green">[ MENU]</b></td>
<td width="23" rowspan=2 bgcolor="#00CC99" valign="middle">
<p align="center">M<br>o<br>u<br>s<br>e<br> <br>o<br>n<br> !
</td></tr>
<tr><td width="183">
<p align="center">
<a href="java51_2.html">Cyda1.jpg</a><br><br>
<a href="Java51_3.html">Cyda2.jpg</a><br><br>
<a href="Java51_4.html">Cyda3.jpg</a><br><br>
<a href="Java51.html">Return</a><br>
</td></tr>
</table>
</div>
</body>
소스(3)을 <body>테그 위치에 붙여넣고요
실행 하면 되는 건데여~~
실행 하면 서브 메뉴가 왼쪽에 자리 잡게 됩니다.
메뉴에다가 마우스를 살짝 갖다놓으면 옆으로 퍼지면서
보여지는겁니다.
제가 질문하고 싶은 부분은 바로 실행이 왼쪽이 아닌
오른쪽에서 실행 시킬수 있는 방법입니다.
이것저것 다 해봤는데 역시 실력이 모자라서 잘 안됩니다.
소스 1 을 수정하면 될것 같은데~~~
어떻게 하는지 알려주시기 부탁드립니다.
댓글 2
-
rosun
2006.04.15 16:15
-
이병휘
2006.04.15 21:47
답변 감사드립니다.
그런데 답변해 주신 부분 즉 html 부분은 제가 해 봤었는데 소용이 없었습니다.
실제로 동작되게 하는부분은 scrollmenu.js 소스 부분입니다.
그리고 제가 올린 링크에 보면 동작 되는걸 확인 하실수 있는데
창 왼쪽에서 서브 메뉴가 나오는걸 반대로 창 오른쪽 에서 실행 하는 방법을
가르쳐 주시라는 의미 였습니다.
답변 감사드립니다.
알고 계시는 분 답변 부탁드립니다.
http://nsw1221.hihome.com/ImportedFiles/myhome/java/java51.html
여기에 가시면 동작이나 소스 부분 더욱더 잘 확인하실수 있습니다.
아무조록 답변 부탁드립니다.
왼쪽에서 떨어지는 거리라고 적은 부분이 숫자가 클수록 오른쪽으로 갑니다.
<style>
#D1 {
position:absolute; width:200px; left:왼쪽에서 떨어지는 거리px; top:위에서 떨어지는 거리px; border:outset 2px white;
background-color:lightgreen; layer-background-color:lightgreen; visibility:hidden;
}
<!--
a:link, a:visited, a:active {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
-->
</style>