웹마스터 팁
page_full_width">
엔지오처럼 메뉴가 아래위로 움직이는 소스[steelheart님 만듬].
2002.11.23 00:16
엔지오처럼 메뉴가 아래위로 움직이는 소스입니다.
만드신 분은 steelheart님께서 만드신 겁니다.
아래와 같은 에러메세지가 출력되었는데, steelheart님께서 다시 재수정하신 겁니다.
원인 : ANIMATE.checked 에서 발생하였습니다.
해결 : ANIMATE.checked ---> document.all.ANIMATE.checked 로 바꾸었습니다.
=======================에러메세지
줄:510
문자 :25
오류 : 'ANIMATE'이(가)정의되지 않았습니다.
코드 :0
URL : http://ktkwin.cafe24.com/zeroboard/write.php?id=excelst&page=1&sn1=divpage=0&ss=on&sc=on&select_arrange=headnum&desc=asc&no=&mode=write&sn1=&divpage=0
========================
아래부터가 소스입니다.
<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 (document.all.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 상태라면
document.all.ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
document.all.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>
===========
마지막으로 steelheart님께 감사의 마음을 전합니다.^^ 꾸벅~!
만드신 분은 steelheart님께서 만드신 겁니다.
아래와 같은 에러메세지가 출력되었는데, steelheart님께서 다시 재수정하신 겁니다.
원인 : ANIMATE.checked 에서 발생하였습니다.
해결 : ANIMATE.checked ---> document.all.ANIMATE.checked 로 바꾸었습니다.
=======================에러메세지
줄:510
문자 :25
오류 : 'ANIMATE'이(가)정의되지 않았습니다.
코드 :0
URL : http://ktkwin.cafe24.com/zeroboard/write.php?id=excelst&page=1&sn1=divpage=0&ss=on&sc=on&select_arrange=headnum&desc=asc&no=&mode=write&sn1=&divpage=0
========================
아래부터가 소스입니다.
<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 (document.all.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 상태라면
document.all.ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
document.all.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>
===========
마지막으로 steelheart님께 감사의 마음을 전합니다.^^ 꾸벅~!
댓글 10
-
▷◁ 구쭌
2002.12.01 02:32
-
세바스챤_™
2002.12.02 06:39
아주 간단하면서 좋은 소스인데요...
보통 스크롤이 먼저고 체크하면 스크롤이 멈춰야 하는데...
여기 엔지오처럼 말이죠...그런데 위의 소스대로 하면 반대가 되는군요..
위 사이트를 가보면 처음에 메뉴가만히 있기에 체크가 되어 있잖아요..
그럴때는 이상함이 없는데 체크 풀고 다시 메뉴를 이동시켜려면
메뉴가만히 있기에 체크해야 한다는...
분명 그 글에 맞게 행하다는게 체크의 개념인데 그렇지가 못하다는거죠
어디를 어떻게 고쳐야 할지 모르겠는데..^^a
가르쳐 주세요~~~ -
steelheart
2002.12.04 12:46
음... 이것은... 어디서 많이 보던 건데... -_-;;;
▷◁ 구쭌님, 세바스챤_™님께서 질문하신 내용은 이 게시판에 올린
제 글... 아마 3번째 페이지 정도에 있을 겁니다. 그쪽 코멘트에 언급이
되어 있습니다. -
써니
2002.12.26 20:45
제 달아보았는데욥.. 잘 되나.. 한가지 문제가..
이곳 엔지오처럼 페이지 끝에서 멈추지않고 스크롤을 내리면 무한대로;; 계속 내려갑니다.
이거 어케 해야 되나효?? -
장인성
2002.12.28 03:06
메뉴이동끄기문제........;;steelheart 님 코멘트글 읽어봤는데요
*원인 : ANIMATE.checked 에서 발생하였습니다.
*해결 : ANIMATE.checked ---> document.all.ANIMATE.checked 로 바꾸었습니다.
이문제하고 겹치는데 어떻게 해야하남요........
코멘트에 언급되어있는건...
ANIMATE.checked 이걸로 언급돼있던데~~ -
이지훈
2003.02.12 15:04
감사감사 -
るろうに劍心
2003.02.26 23:40
저두 써니님과 같은 문제가..ㅠ_ㅠ 아래쪽으루 무한스크롤이 되어요..흑..
어떡해야하나.....아...ㅠ.ㅠ -
부니기
2003.05.26 06:58
감사합니다 ^^
るろうに劍心님, 무한스크롤이 되는것은 왼쪽 메뉴레이어가 윈도우창 아래쪽 경계를 넘어가기 때문이지요. STATICMENU레이어의 세로 크기를 줄여보세요... 그리고 페이지의 끝까지 스크롤 했을때 STATICMENU레이어가 화면 아래쪽으로 넘어가지않게 사이즈를 조절해 보세요~ -
김민수
2004.01.06 12:50
넷스케이프에선 안되여 -
gunjoo
2005.04.05 22:06
좋습니다.
추천한방 날립니다.
슬라이딩 메뉴를 찾고 있었는데
간단하고 좋네요.
콘트롤도 잘 되구요...
우선 테스트 삼아 게시판 하나에 적용해 보았는데
http://www.9zzun.com/solution/zboard.php?id=book
한가지 궁금한 것은요...
사이트가 왼쪽 정렬이 아닌 가운데 정렬인 구조에는 적용이 불가능한지요??