웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
메뉴 옆에서 화살표가 스크롤되는..
2003.05.29 16:49
사이트 만들다가 메뉴에 마우스가 올라갔을대 그걸 쫒아 다니는 무언가가 있어으면 해서 만들었습니다.
급하게 적용시키느라 다른 구조에서 이식하기는 좀 번거롭겠네요..
^^; 그거야 뭐 시간나면 반응보구 올리죠뭐..
이건 레이어가 그냥 혼자 떠있는건 아니구요
td나 기타 box안에 자리잡아야 하게 만들었습니다.
--------------------
| |
| > | 메뉴
| |---------------
| |
| | 메뉴
---------------------
위처럼 화살표가 박스 안에 자리잡게 됬거든요..
그리고 안타까운점은 아직 세로형태의 메뉴에만 적용시켜 봤습니다..-_- 서브메뉴용이라 시간두 없구해서요..
밑에 소스 보시면 div_id.style.pixelTop이란게 있는데요
여러게 있을겁니다. 혹시 가로로 해보실분들은 저걸 전부 pixelLeft로 바꾸셔야 될듯해요
가로는 구조가 이렇게 되겠죠..
--------------------------------------------------
V
--------------------------------------------------
| | | | |
| 메뉴 | 메뉴 | 메뉴 | 메뉴 |
위에서 와따 가따 거리는 -_-;
암튼 대충설명 이거 가따가 그냥 빼껴 쓰실거면 아예 긁어가지 마세요
모양세가 개판오분전이거든요..-_- 보여지는 부분은 수정하셔야 해요..
글구 변수값도 약간 설정해주셔야 하구요. 그리고 각메뉴에 onMouseOver="javascript:menu_num(번호)"이거 넣어주셔야
그 번호로 갑니다. 여기서 번호란 메뉴가 3개면 맨위에꺼가 1번..맨끝이 3번
그리고 정확히 픽셀이 안맞을수 있는데요 >이런 마크 같은경우 중심점이 맨위에 있어서 좀더 밑으로 내려가는 현상이 있습니다.
음 그런경우 메뉴의 높이를 좀더 적게 설정하면 약간은 해결될듯합니다.
설명대충끈코 예제보세요..-_- 모양은 절대 보지 말기..
http://goweb.netcci.org/pds/scroll_2.html
<script language="JavaScript" type="text/javascript">
<!--
var menu_length = 3; ///세로로 나열되있는 메뉴의 갯수 단, 메뉴의 높이가 일정해야함.
var menu_height = 50; /// 1개 메뉴의 높이
var menu_middle = parseInt(menu_height/2); //넘어가고
var speed = 10; // 메뉴를 따라가는 스피드 수가 높아도 빨라지고 낮아도 빨라지다 어쩌다 운좋은 숫자 넣으면 느려지는..-_-
var speed2 = 10; // 수가 높을수록 느려지고 끈키는 효과(?) ㅋㅋ 이상변수설정 끝 저기 밑으로 쭈욱..~~
var menu_position,moving_spd,loop,frtop,frbot;
function menu_nums(num)
{
menu_position = (menu_height*num)-menu_middle;
clearTimeout(loop);
goto_slide(menu_position);
}
function goto_slide(value)
{
frtop = value;
frbot = value;
if(div_id.style.pixelTop <= frtop)
{
moving_spd = Math.round((frtop-div_id.style.pixelTop)/speed);
if(moving_spd == 0)
{
if(div_id.style.pixelTop < frtop)
{
moving_spd = 1;
}
}
div_id.style.pixelTop += moving_spd;
document.sdf.a1.value = moving_spd;
document.sdf.a2.value = div_id.style.pixelTop;
document.sdf.a3.value = frtop;
loop = setTimeout("goto_slide("+value+")",speed2);
}else if(div_id.style.pixelTop >= frbot)
{
moving_spd = Math.round((div_id.style.pixelTop-frbot)/speed);
if(moving_spd == 0)
{
if(div_id.style.pixelTop > frbot)
{
moving_spd = 1;
}
}
div_id.style.pixelTop -= moving_spd;
document.sdf.a1.value = moving_spd;
document.sdf.a2.value = div_id.style.pixelTop;
document.sdf.a3.value = frbot;
loop = setTimeout("goto_slide("+value+")",speed2);
}else{ clearTimeout(loop); }
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
menu_nums(3); //처음 로딩되었을때 화살표가 가야할 위치.메뉴 넘버로 함.
//-->
</script>
</head>
<body>
<table border="0" width="700" cellpadding="0" cellspacing="0">
<form name="sdf">
<tr height="50">
<td rowspan="3" valign="top" align="center"
<div id="div_id" style="position:relative;left:0px;top:0px">></div>
</td>
<td onMouseOver="menu_nums(1)" style="border-left:1px solid black;" bgcolor="f5f5f5" align="center">메뉴</td>
<td ><input name="a1" size="5">속도</td>
</tr>
<tr height="50">
<td onMouseOver="menu_nums(2)" style="border-left:1px solid red;" bgcolor="f5f5f5" align="center">메뉴</td>
<td><input name="a2" size="5">화살표의 위치</td>
</tr>
<tr height="50">
<td onMouseOver="menu_nums(3)" style="border-left:1px solid blue;" bgcolor="f5f5f5" align="center">메뉴</td>
<td><input name="a3" size="5">도착점</td>
</tr>
</form>
</table>
급하게 적용시키느라 다른 구조에서 이식하기는 좀 번거롭겠네요..
^^; 그거야 뭐 시간나면 반응보구 올리죠뭐..
이건 레이어가 그냥 혼자 떠있는건 아니구요
td나 기타 box안에 자리잡아야 하게 만들었습니다.
--------------------
| |
| > | 메뉴
| |---------------
| |
| | 메뉴
---------------------
위처럼 화살표가 박스 안에 자리잡게 됬거든요..
그리고 안타까운점은 아직 세로형태의 메뉴에만 적용시켜 봤습니다..-_- 서브메뉴용이라 시간두 없구해서요..
밑에 소스 보시면 div_id.style.pixelTop이란게 있는데요
여러게 있을겁니다. 혹시 가로로 해보실분들은 저걸 전부 pixelLeft로 바꾸셔야 될듯해요
가로는 구조가 이렇게 되겠죠..
--------------------------------------------------
V
--------------------------------------------------
| | | | |
| 메뉴 | 메뉴 | 메뉴 | 메뉴 |
위에서 와따 가따 거리는 -_-;
암튼 대충설명 이거 가따가 그냥 빼껴 쓰실거면 아예 긁어가지 마세요
모양세가 개판오분전이거든요..-_- 보여지는 부분은 수정하셔야 해요..
글구 변수값도 약간 설정해주셔야 하구요. 그리고 각메뉴에 onMouseOver="javascript:menu_num(번호)"이거 넣어주셔야
그 번호로 갑니다. 여기서 번호란 메뉴가 3개면 맨위에꺼가 1번..맨끝이 3번
그리고 정확히 픽셀이 안맞을수 있는데요 >이런 마크 같은경우 중심점이 맨위에 있어서 좀더 밑으로 내려가는 현상이 있습니다.
음 그런경우 메뉴의 높이를 좀더 적게 설정하면 약간은 해결될듯합니다.
설명대충끈코 예제보세요..-_- 모양은 절대 보지 말기..
http://goweb.netcci.org/pds/scroll_2.html
<script language="JavaScript" type="text/javascript">
<!--
var menu_length = 3; ///세로로 나열되있는 메뉴의 갯수 단, 메뉴의 높이가 일정해야함.
var menu_height = 50; /// 1개 메뉴의 높이
var menu_middle = parseInt(menu_height/2); //넘어가고
var speed = 10; // 메뉴를 따라가는 스피드 수가 높아도 빨라지고 낮아도 빨라지다 어쩌다 운좋은 숫자 넣으면 느려지는..-_-
var speed2 = 10; // 수가 높을수록 느려지고 끈키는 효과(?) ㅋㅋ 이상변수설정 끝 저기 밑으로 쭈욱..~~
var menu_position,moving_spd,loop,frtop,frbot;
function menu_nums(num)
{
menu_position = (menu_height*num)-menu_middle;
clearTimeout(loop);
goto_slide(menu_position);
}
function goto_slide(value)
{
frtop = value;
frbot = value;
if(div_id.style.pixelTop <= frtop)
{
moving_spd = Math.round((frtop-div_id.style.pixelTop)/speed);
if(moving_spd == 0)
{
if(div_id.style.pixelTop < frtop)
{
moving_spd = 1;
}
}
div_id.style.pixelTop += moving_spd;
document.sdf.a1.value = moving_spd;
document.sdf.a2.value = div_id.style.pixelTop;
document.sdf.a3.value = frtop;
loop = setTimeout("goto_slide("+value+")",speed2);
}else if(div_id.style.pixelTop >= frbot)
{
moving_spd = Math.round((div_id.style.pixelTop-frbot)/speed);
if(moving_spd == 0)
{
if(div_id.style.pixelTop > frbot)
{
moving_spd = 1;
}
}
div_id.style.pixelTop -= moving_spd;
document.sdf.a1.value = moving_spd;
document.sdf.a2.value = div_id.style.pixelTop;
document.sdf.a3.value = frbot;
loop = setTimeout("goto_slide("+value+")",speed2);
}else{ clearTimeout(loop); }
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
menu_nums(3); //처음 로딩되었을때 화살표가 가야할 위치.메뉴 넘버로 함.
//-->
</script>
</head>
<body>
<table border="0" width="700" cellpadding="0" cellspacing="0">
<form name="sdf">
<tr height="50">
<td rowspan="3" valign="top" align="center"
<div id="div_id" style="position:relative;left:0px;top:0px">></div>
</td>
<td onMouseOver="menu_nums(1)" style="border-left:1px solid black;" bgcolor="f5f5f5" align="center">메뉴</td>
<td ><input name="a1" size="5">속도</td>
</tr>
<tr height="50">
<td onMouseOver="menu_nums(2)" style="border-left:1px solid red;" bgcolor="f5f5f5" align="center">메뉴</td>
<td><input name="a2" size="5">화살표의 위치</td>
</tr>
<tr height="50">
<td onMouseOver="menu_nums(3)" style="border-left:1px solid blue;" bgcolor="f5f5f5" align="center">메뉴</td>
<td><input name="a3" size="5">도착점</td>
</tr>
</form>
</table>
댓글 2
-
고냉이 콱!
2003.05.29 17:47
우와... 좋다 -
개굴너굴데굴
2003.10.29 21:45
휘바휘바;ㅁ;!!!!!!! 근데 어려워요![;;;;;;;]
제목 | 글쓴이 | 날짜 |
---|---|---|
MS홈에 쓰이는 오른쪽메뉴 툴바
[13]
![]() | Kortion | 2003.02.22 |
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] | 이남두 | 2003.02.26 |
엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] | 스티치 | 2003.03.29 |
간단한 점프메뉴(selecter) [14] | 박재현 | 2003.04.14 |
메뉴이동입니다. [5] | 데빌스텔스 | 2003.04.20 |
메뉴 옆에서 화살표가 스크롤되는.. [2] | 힘찬연못 | 2003.05.29 |
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] | 처절초보 | 2003.06.16 |
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] | 처절초보 | 2003.06.16 |
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] | 김주형 | 2003.07.03 |
[수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] | 미니 | 2003.08.18 |
플레쉬 메뉴를 표방한..=ㅁ= 자바스크립트의 수작 버튼 밑으로 스크롤 되는 아이콘입니다. [47] | beMax | 2003.09.14 |
플래시느낌의 유동적인 메뉴 [9] | jabusim | 2003.11.13 |
오른버튼 누를때 메뉴 뜨게하기(깔끔버전)
[5]
![]() | 럽 | 2003.12.09 |
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] | 봉팀장 | 2003.12.30 |
[초간단 자바스크립트!] 색깔바뀌는 메뉴 [3] | ∑Ztxy | 2004.01.19 |
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] | ∑Ztxy | 2004.03.10 |
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.)
[9]
![]() | tintintm | 2004.03.23 |
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 | ☺심심 | 2004.05.17 |
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] | ∑Ztxy | 2004.06.05 |
레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |