웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
이동 메뉴 (Netscape 가능 NZEO.com 소스)
2002.12.08 08:12
원래 steelheart 님이 만드신 이동 메뉴 스크립트를 쓰다가 네츠케이프에서 아예 메뉴조차도 나오지 않는 호환성 때문에 약간의 불편함을 감수해야 했습니다. 그런데 이상하게도 제로님 홈페이지에서는 네츠케입에서도 메뉴가 정상적으로 출력이 되더라구요. 그래서 제로님의 홈페이지에 있는 소스를 보고서 필요한 부분만 발췌해서 이렇게 내놓습니다. 네츠케이프에서도 지원되는 이동메뉼르 구현하실 분들만 쓰도록 하세요.
(이게 원래는 이동 체크하는 부분이 있는데... 그부분의 action 파일이 어떤 구조로 돌아가는 지를 모르겠어서 그냥 주석처리했습니다. 언젠가는 밝혀지겠죠 ㅡㅡ;; 그냥 하단의 부분만 자바스크립트로 어떻게 해도 되지 않을까 생각하지만.. ㅡㅡ;; 어떤 분께서 그냥 not_ani.html 의 구조를 알려주심 좋겠네요. 그 파일이 아마 하단 자바스크립트를 지우고 다시 로드해주는 파일로 보입니다.)
소스 길이도 적도 꽤 괜찮습니다. 문제는 네츠케이에서는 이동 속도가 죽음이라는데 있지만.. --;; 네츠케이프의 문제인것 같고.. 메뉴만 나오는 것도 다행이라고 할 수 있죠...
홈페이지에 맞도록 변수를 수정해서 쓰세요.
ps. 왼쪽 마진과 초기 시작 위치는 은 div 태그의 style 옵션에서 설정을 해주면 됩니다.
-------------------------------------------------------------------------------------------------
<!-- 메뉴이동 스크립트 -->
<SCRIPT language=javascript>
<!-- //
var _scroll_topmargin=254; // 이동 메뉴의 상단 한계 픽셀
var _scroll_ing_topmargin=3; // 움직이는 도중의 상단과의 간격
var _scroll_activate_speed=500; // 초기 움직임을 감지하는 시간차이 (1/1000초)
var _scroll_ing_activate_speed=10; // 움직이기 시작한 이후에 감지하는 시간차이 (1/1000초)
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
var isNS = navigator.appName == "Netscape";
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset+_scroll_ing_topmargin;
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop)+_scroll_ing_topmargin;
}
if(yMenuTo<_scroll_topmargin) yMenuTo = _scroll_topmargin;
timeoutNextCheck = _scroll_activate_speed;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 10);
if (yMenuTo < yMenuFrom) yOffset = -yOffset;
if (isNS4) divMenu.top += yOffset;
else if (isDOM) divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = _scroll_ing_activate_speed;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
-->
</SCRIPT>
<DIV id=divMenu style="LEFT: 13px; VISIBILITY: visible; WIDTH: 145; POSITION: absolute; TOP: 254px; z-index=2">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<!-- 메뉴부분 끝 -->
<!-- 메뉴이동 기능 -->
<!--
<table border=0>
<form action=<?=$_cscafe_url?>share/not_ani.html method=get> // 이 부분이 어떻게 동작하는 지를 알 수 없음.
<tr>
<td>
<input type=checkbox name=not_ani value=1 onclick=submit()> 메뉴이동 기능 끄기
</td>
</tr>
</form>
</table>
-->
</DIV>
<SCRIPT language=javascript>
<!-- //
if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + _scroll_topmargin;
divMenu.visibility = "visible";
moveRightEdge();
}
else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + _scroll_topmargin;
divMenu.style.visibility = "visible";
moveRightEdge();
}
//-->
</SCRIPT>
(이게 원래는 이동 체크하는 부분이 있는데... 그부분의 action 파일이 어떤 구조로 돌아가는 지를 모르겠어서 그냥 주석처리했습니다. 언젠가는 밝혀지겠죠 ㅡㅡ;; 그냥 하단의 부분만 자바스크립트로 어떻게 해도 되지 않을까 생각하지만.. ㅡㅡ;; 어떤 분께서 그냥 not_ani.html 의 구조를 알려주심 좋겠네요. 그 파일이 아마 하단 자바스크립트를 지우고 다시 로드해주는 파일로 보입니다.)
소스 길이도 적도 꽤 괜찮습니다. 문제는 네츠케이에서는 이동 속도가 죽음이라는데 있지만.. --;; 네츠케이프의 문제인것 같고.. 메뉴만 나오는 것도 다행이라고 할 수 있죠...
홈페이지에 맞도록 변수를 수정해서 쓰세요.
ps. 왼쪽 마진과 초기 시작 위치는 은 div 태그의 style 옵션에서 설정을 해주면 됩니다.
-------------------------------------------------------------------------------------------------
<!-- 메뉴이동 스크립트 -->
<SCRIPT language=javascript>
<!-- //
var _scroll_topmargin=254; // 이동 메뉴의 상단 한계 픽셀
var _scroll_ing_topmargin=3; // 움직이는 도중의 상단과의 간격
var _scroll_activate_speed=500; // 초기 움직임을 감지하는 시간차이 (1/1000초)
var _scroll_ing_activate_speed=10; // 움직이기 시작한 이후에 감지하는 시간차이 (1/1000초)
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
var isNS = navigator.appName == "Netscape";
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset+_scroll_ing_topmargin;
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop)+_scroll_ing_topmargin;
}
if(yMenuTo<_scroll_topmargin) yMenuTo = _scroll_topmargin;
timeoutNextCheck = _scroll_activate_speed;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 10);
if (yMenuTo < yMenuFrom) yOffset = -yOffset;
if (isNS4) divMenu.top += yOffset;
else if (isDOM) divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = _scroll_ing_activate_speed;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
-->
</SCRIPT>
<DIV id=divMenu style="LEFT: 13px; VISIBILITY: visible; WIDTH: 145; POSITION: absolute; TOP: 254px; z-index=2">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<!-- 메뉴부분 끝 -->
<!-- 메뉴이동 기능 -->
<!--
<table border=0>
<form action=<?=$_cscafe_url?>share/not_ani.html method=get> // 이 부분이 어떻게 동작하는 지를 알 수 없음.
<tr>
<td>
<input type=checkbox name=not_ani value=1 onclick=submit()> 메뉴이동 기능 끄기
</td>
</tr>
</form>
</table>
-->
</DIV>
<SCRIPT language=javascript>
<!-- //
if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + _scroll_topmargin;
divMenu.visibility = "visible";
moveRightEdge();
}
else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + _scroll_topmargin;
divMenu.style.visibility = "visible";
moveRightEdge();
}
//-->
</SCRIPT>
댓글 9
-
steelheart
2002.12.08 09:37
-
백일몽
2002.12.08 11:02
모질라 1.2 에서는 아주 부드럽게 이동합니다만... -
김은정
2002.12.08 15:44
근대요.. 파일.. 메뉴.. 어떤.. 형식이여야 하나요?
<img src=>// 인가요?? 소스만..알면 뭐해요 ㅠㅠ
어떻게 적용하느 냐가..문제;;;;;;;;;;;;;;;;;;
ㅠㅠ 흑... -
박영창
2002.12.08 20:15
김은정/파일은 당연히 html 이고 메뉴를 삽입하는 부분에다가 붙여주기만 하면되는겁니다. 물론 php 에다가 넣으면 따로 파일을 하나 만들어서 include 해주면 모듈화가 된다고 할까? 그런식으로 해주면 홈페이지를 수정관리하기가 아주 편리해죠. 뭐 이런거야 만드는 사람 재량껏 하는 거고... 기본적으로 javascript 를 기반으로 하기때문에 html 에 들어가게 되는 소스입니다. -
구자성
2002.12.19 04:44
엔지오 같은 경우는 쿠키를 이용해서 메뉴이동 끄기 기능을 구현하는 듯 합니다.
메뉴 이동끄기에 체크한 후 다시 이곳에 접속하면 메뉴 이동이 꺼져 있지만
인터넷 옵션에서 쿠키를 삭제한 후 다시 접속하면 메뉴가 다시 이동이 됩니다.
저 같은 경우에는 이곳 엔지오 이동 스크립트를 쓰면서 메뉴 이동끄기는 php로 접속자 ip를 구분하는 형식으로 사용하고 있습니다.
접속자 아이피와 메뉴 이동 체크 여부를 디비에 3시간 단위로 저장해 페이지 접속시마다 불러오는 방법입니다.
쿠키 사용 방법보다는 속도면에서 느리겠지만 저장 시간을 적절히 수정하면 꽤 효과를 볼 수 있는 것 같습니다. -
나꼬지비
2002.12.17 23:48
제로게시판 오른쪽이나 왼쪽에 붙일려면 제로보드 어디를 수정해야 하고 어떤파일을 수정해야 하나요?
풋터나 해더를 이용해도 가능한지요? 그리고 위치를 어떻게 잡아야 하는지요?
저는 원(프레임 없는)페이지를 만들고 싶습니다. -
cguy
2003.01.09 21:39
좌측 정렬의 경우에만 사용할수 있는 단점이 있네요. -_-
제 경우 사이트가 가운데 정렬인데,
좌측 값을 고정할수가 없겠죠. (각자 해상도가 달르니 -_-)
원래 테이블 나오는 위치에서 항상 나오게 할수는 없을런지요? -
weki
2003.01.17 03:43
cguy//
여기를
div id=divMenu style="LEFT: 13px;
RIGHT로 수정하면 아마도 작동 하지 않을까요? ^^ -
유창호
2003.02.19 00:19
브라우져가 작아지거나 15인치브라우져에서는 레이어가 제자리에서 벗어나는데
어떻게 고정시킬 수 있는 방법은 없나요?
제로보드의 좌측메뉴처럼 말이죠.
제목 | 글쓴이 | 날짜 |
---|---|---|
홈페이지 패스워드(암호) 걸기 소스 [6] | keymove | 2003.01.09 |
select form 으로 새 창 띄우기 [4] | 당근당근 | 2003.01.07 |
[re] select form 으로 새 창 띄우기(간단버전) [3] | RedEye | 2003.01.27 |
갤러리스킨에 쓰면 좋을 것 같은 미리보기(수정2) [10] | 행복한고니 | 2003.01.06 |
크롬리스에 응용할만한 소스;; [3] | MYMob.INT. | 2003.01.05 |
숫자를 한글로 변환하는 함수 [1] | 행복한고니 | 2003.01.03 |
mid 랜덤으로 듣기 ... [2] | 아벨라 | 2003.01.02 |
색다른 링크법(새창) [2] | BIRDY™ | 2002.12.30 |
텍스트 폼 / 전체선택 하기 자바스크립 | mnemosyne | 2002.12.24 |
div, Javascript 이용해서 섹션 테이블 만들기 [3] | mnemosyne | 2002.12.18 |
크롬리스 완벽해결! IE.2.0부터 Netscape까지 작동가능!! [13] | 김민호 | 2002.12.16 |
오른쪽 클릭 메뉴 [6] | 디아릭스 | 2002.12.16 |
select form 으로 새창띄우기(수정:2002-12-19) [3] | dolufy | 2002.12.11 |
홈페이지에 머무른 시간을 알림창으로 나타내기. [3] | 시즌오브드림 | 2002.12.10 |
출렁이며 내려오는 공지창.. [3] | 아벨라 | 2002.12.10 |
아래 새창에 맞게 이미지 띄우기 더더 업그레이드 판! [6] | ATply | 2002.12.09 |
이동 메뉴 (Netscape 가능 NZEO.com 소스) [9] | 박영창 | 2002.12.08 |
아래 이미지크기에 맞게 새창띄우는 소스(기능개선판) (-_-) v [10] | 행복한고니 | 2002.12.07 |
[re] 오류 아닌 오류 나시는 분덜... | 임병찬 | 2003.04.22 |
이미지 크기에 맞게 새창띄우는 자바소스인데요~ [3] | 새벽이슬 | 2002.12.07 |
좋네요. ^^;; 제가 넷스케이프를 싫어하는 이유도 있겠지만... -_-;;;
not_ani.html이 하는 일은 정말 간단합니다. html로도 처리할수는 있지만 nzeo에서는
확장자만 html이고 php로 처리한 것 같네요. php를 잘 몰라 자세히 써 드릴수는 없지만
대략적으로 다음과 같은 일을 합니다. (물론 짐작입니다만...)
1. not_ani (체크박스)의 값을 받아온다 // $not_ani
2. not_ani 의 값을 쿠키로 저장한다 // saveCookie(..) 이런 비슷한 함수가 php에도 있겠죠.
3. 자신을 호출한 원래 주소로 되돌아간다. // setHeader("Location: ....... 또는 location.replace
php로 직접 코딩을 하면 몇줄내로 간단히 될 것 같습니다.
그리고 또 하나 해줘야 하는 일이 있는데, not_ani.html 파일 말고 저 이동메뉴 소스중에
제일 마지막 <script>~</script> 부분은 이동메뉴를 구현하는 부분입니다.
not_ani.html을 구현했다고 해도 저 부분을 그대로 두면 쿠키값에 상관없이 그냥 움직이겠죠.
php 차원 또는 자바스크립트로 쿠키를 읽은 후 거기에 따라 메뉴구동부분을 실행하거나
실행하지 않거나 하는 부분을 추가로 작성해 주셔야 할 것 같네요.
예를 들면 이런 식으로요...
<? if (readCookie("not_ani") != "checked") { ?>
<script>~~~~~~</script>
<? } ?>
※ 삐익~ : 소스에서 문법은 신경쓰지 마세요. 그냥 그런 식이라는 것 뿐. 전 php 잘 모릅니다.