웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
NZEO의 좌측 스크롤메뉴의 구현 방법입니다.
이런 움직이는 레이어 예제는 여러가지 형태가 나와 있어서 아시는 분도 있을테고
이미 그중에 하나를 사용하고 있는 분들도 있겠지만, 메뉴 이동을 ON/OFF 를 어떻게 하는걸까
궁금해 하시는 분들이 계셔서 예제를 만들어 올립니다.
예제 미리보기: http://steelheart.pe.kr/scrollmenu.html
전체적인 작동방식은 크게 어려울 게 없습니다. 바로 쿠키를 이용하는 거죠.
쿠키값이 "true" 이면 메뉴이동기능을 시작하는 함수를 실행하고 아니면 시작 안하면 됩니다 -_-;;;
간단하죠?
넣는 방법은 <!-- 스크롤메뉴를 위한 구성입니다. -->
이 부분을 기준으로 앞의 것은 <head>~</head> 사이에 넣으시거나 별도의 js파일을 만들어 불러오시고
뒤에것은 자기 홈페이지의 적당한 곳 (메뉴가 들어갈 부분)에 넣어 주시면 됩니다.
잘 모르겠다 싶으시면 일단 <body> 뒤쪽 또는 </body> 앞쪽에 넣어 주세요...
어느 쪽에 넣어야 되는지 컨설팅(?)은 받지 않겠습니다. -_-;
일부 회원님의 경우 가운데 정렬 홈페이지인데 이 소스는 왼쪽으로 박혀(?) 있다고 하시는 경우가
있는데요. 이건 초보분들을 위해 LEFT 속성을 설정할 수 있게 해서 그렇습니다.
소스에서 stmnLEFT가 들어가는 줄은 모두 삭제하시고 다음의 소스에서
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
"left:-5000px;"를 지우세요. 그리고 나서 <div>~</div>를 원래 메뉴가
들어갈 적당한 자리에 넣어주시기만 하면 원하시는 대로 제대로 작동합니다.
※ PHP 버전은 작동방식과 적용방식이 달라 올리지 않겠습니다. (더이상 문의하지 마세요)
※ 이 소스는 만병통치약이 아닙니다; 용도에 맞게 알아서 -_-; 잘 수정해서 쓰세요.
2002.11.9. 수정
<script language="javascript">
<!--
var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치. 필요 없을 경우 삭제
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
// 쿠키 읽기
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
// 쿠키 저장
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
// 스크롤 메뉴의 위치 갱신
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
STATICMENU.style.left = stmnLEFT; // 메뉴 왼쪽 위치 초기화. 필요없을 경우 삭제
}
-->
</script>
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="5" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td style="font-weight:bold; text-align:center;">NZEO</td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤 테스트를 위해 여백을 확보하기 위한 부분... 별 의미는 없음... 실제로 적용시에는 지워 버리세요. -->
<div style="width:50px; height:2500px;"></div>
추가로... On/Off 선택기능이 없는 스크립트 (무조건 스크롤)
-------------------------------------------------------------------------------------
<script language="javascript">
<!--
var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
else {
stmnRefreshTimer = stmnActivateSpeed;
}
setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
function InitializeStaticMenu()
{
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
STATICMENU.style.left = stmnLEFT;
}
-->
</script>
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="5" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td style="font-weight:bold; text-align:center;">NZEO</td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
<!-- 스크롤 테스트를 위해 여백을 확보하기 위한 부분... 별 의미는 없음... 실제로 적용시에는 지워 버리세요. -->
<div style="width:50px; height:2500px;"></div>
NZEO의 좌측 이동메뉴를 구현해 보자. (이동 On/Off 기능 포함)
2002.08.20 02:05
NZEO의 좌측 스크롤메뉴의 구현 방법입니다.
이런 움직이는 레이어 예제는 여러가지 형태가 나와 있어서 아시는 분도 있을테고
이미 그중에 하나를 사용하고 있는 분들도 있겠지만, 메뉴 이동을 ON/OFF 를 어떻게 하는걸까
궁금해 하시는 분들이 계셔서 예제를 만들어 올립니다.
예제 미리보기: http://steelheart.pe.kr/scrollmenu.html
전체적인 작동방식은 크게 어려울 게 없습니다. 바로 쿠키를 이용하는 거죠.
쿠키값이 "true" 이면 메뉴이동기능을 시작하는 함수를 실행하고 아니면 시작 안하면 됩니다 -_-;;;
간단하죠?
넣는 방법은 <!-- 스크롤메뉴를 위한 구성입니다. -->
이 부분을 기준으로 앞의 것은 <head>~</head> 사이에 넣으시거나 별도의 js파일을 만들어 불러오시고
뒤에것은 자기 홈페이지의 적당한 곳 (메뉴가 들어갈 부분)에 넣어 주시면 됩니다.
잘 모르겠다 싶으시면 일단 <body> 뒤쪽 또는 </body> 앞쪽에 넣어 주세요...
어느 쪽에 넣어야 되는지 컨설팅(?)은 받지 않겠습니다. -_-;
일부 회원님의 경우 가운데 정렬 홈페이지인데 이 소스는 왼쪽으로 박혀(?) 있다고 하시는 경우가
있는데요. 이건 초보분들을 위해 LEFT 속성을 설정할 수 있게 해서 그렇습니다.
소스에서 stmnLEFT가 들어가는 줄은 모두 삭제하시고 다음의 소스에서
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
"left:-5000px;"를 지우세요. 그리고 나서 <div>~</div>를 원래 메뉴가
들어갈 적당한 자리에 넣어주시기만 하면 원하시는 대로 제대로 작동합니다.
※ PHP 버전은 작동방식과 적용방식이 달라 올리지 않겠습니다. (더이상 문의하지 마세요)
※ 이 소스는 만병통치약이 아닙니다; 용도에 맞게 알아서 -_-; 잘 수정해서 쓰세요.
2002.11.9. 수정
<script language="javascript">
<!--
var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치. 필요 없을 경우 삭제
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
// 쿠키 읽기
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
// 쿠키 저장
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
// 스크롤 메뉴의 위치 갱신
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
STATICMENU.style.left = stmnLEFT; // 메뉴 왼쪽 위치 초기화. 필요없을 경우 삭제
}
-->
</script>
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="5" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td style="font-weight:bold; text-align:center;">NZEO</td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤 테스트를 위해 여백을 확보하기 위한 부분... 별 의미는 없음... 실제로 적용시에는 지워 버리세요. -->
<div style="width:50px; height:2500px;"></div>
추가로... On/Off 선택기능이 없는 스크립트 (무조건 스크롤)
-------------------------------------------------------------------------------------
<script language="javascript">
<!--
var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
else {
stmnRefreshTimer = stmnActivateSpeed;
}
setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
function InitializeStaticMenu()
{
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
STATICMENU.style.left = stmnLEFT;
}
-->
</script>
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="5" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td style="font-weight:bold; text-align:center;">NZEO</td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
</div>
<!-- 스크롤 메뉴 정의 끝 -->
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
<!-- 스크롤 테스트를 위해 여백을 확보하기 위한 부분... 별 의미는 없음... 실제로 적용시에는 지워 버리세요. -->
<div style="width:50px; height:2500px;"></div>
댓글 43
제목 | 글쓴이 | 날짜 |
---|---|---|
네임서버 설정 [15] | 쇠물택 | 2002.02.24 |
아파치 가상 유저 설정하기 [6] | i- | 2002.02.24 |
전자우편만 사용할수 있는 계정추가하기 [1] | pai | 2002.02.25 |
리눅스서버 : 도메인 가진 사용자 추가하기 (텔넷,FTP,이메일 사용) [5] | pai | 2002.02.27 |
근사모의 APM_steup3설치 법 [5] | 뽀유★ | 2002.03.01 |
아래 pai님 도메인셋팅 강좌 세부파일들 예제 :) [3] | 아르체 | 2002.03.06 |
리눅스 아주 간단한 사용자 계정 주기-_- [7] | i- | 2002.03.12 |
MySQL 사용자 계정주기 [10] | pai | 2002.03.12 |
[mysql을 하자 1] mysql 종료와 재부팅 | 비바람 | 2002.03.13 |
[mysql을 하자 2] (pai님도 하신^^)사용자와 db를 맹글자 [4] | 비바람 | 2002.03.13 |
[mysql을 하자 3] DB서버 원격 사용자,DB 만들어 사용하기 [5] | 비바람 | 2002.03.13 |
Apache2.0.35 + php4.3.0-devel 설치하기;; [15] | Cksoft | 2002.04.08 |
DB 디자인 툴 소개 [2] | 석이 | 2002.04.21 |
개인서버구동시 서버커널 메모리로....(렉생기시는분들 강추) [2] | 홈1004 | 2002.05.03 |
Redhat7.2에서 apache,mysql,php,zend,gd,freetype,giflib,jpeglib,zlib 설치하기
[14]
![]() | DeX™ | 2002.05.04 |
[알아서 나쁠것없는 10원짜리 팁!] 수십 수백명사용자의 일괄생성 방법! [6] | 임현 | 2002.05.09 |
Redhat 7.3 나왔습니다. [20] | 야쿠자 | 2002.05.10 |
텔넷에서 다른 계정사용자의 홈디렉토리 접근 막기 [4] | 김영남 | 2002.05.11 |
웹호스팅 서버세팅 쉽게하기 팁[윈도우 메모장 이용] [3] | 김영남 | 2002.05.14 |
가상호스트 i- 님의 강의에 덧붙여서 | 이종렬 | 2002.05.24 |