웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
엔지오식 좌측이동메뉴 레이어 가운데기준정렬
2003.03.29 11:29
엔지오식 이동메뉴를 사용하면.. 왼쪽위치를 기준으로 정렬이 되죠.
그런데 저는 전체적으로 가운데정렬인 홈페이지를 자주 만들다 보니 브라우져의 크기값에 따라 위치가 바뀌는겁니다...
그래서 가운데를 기준으로 레이어를 배치시키도록 소스를 조금 고쳐보았습니다.
물론 아래에 다른분들이 올리신 엔지오식 이동메뉴 구현법과 레이어 가운데 정렬법을 참고하여 소스를 혼합하였습니다.
제가 독자적으로 만든게 아니라는걸 우선 밝히구요.
좀 잘 다루시는 분들에겐 그다지 필요하지 않겠지만..
초보분들도 이 소스를 많이 쓰기를 원하시는 것 같아서 올려봅니다.
아래의 소스는 모두 헤드안에 들어가야 합니다.^^
요점은.. 원래 소스의 좌측 위치를 잡아주는 소스를 빼버리고 가운데값을 계산해주는 스타일을 정의해 주므로써 가운데를 기준으로 정렬할 수 있게 만든다는 겁니다.
------------------------------------------------------------
<!--가운데 값 계산//-->
<style>
#STATICMENU
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
<!--가운데값 계산끝//-->
<script language="javascript">
<!--
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(); // 스크립트 가동
}
}
-->
</script>
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" pos=390>
<!--pos 부분에 숫자값이 위치를 정하는 부분입니다... 가운데를 0으로 하여 왼쪽은 +값, 오른쪽은 -값으로 설정하시면 됩니다//-->
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:190px;">
<tr>
<td style="font-weight:bold; text-align:center;">메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br>메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br></td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
-----------------------------------
잘 모르시는 분들을 위해 보충설명을 드리자면.. 위에 pos 라는 값이 들어가는 부분이 위치를 지정해주는 부분입니다.
pos값이 현재는 390으로 되어 있지요.
가운데를 0으로 두고 왼쪽으로 390픽셀만큼 띄어진 곳에 위치하는 겁니다.
만약 이 부분을 0으로 주면 정가운데에 레이어를 위치시킬 수 있지요.
(이 기준점은 레이어의 사각박스중 왼쪽라인을 기준으로 하는 겁니다)
테스트하실때 pos 값을 여러번 바꾸어서 대입해보고 정확한 위치값을 찾아주세요.
-값으로 쓰시면 가운데를 기준으로 오른쪽으로 이동됩니다.
** 이 소스의 단점은... 레이어가 브라우져의 왼쪽끝에 닿았는데도 불구하고 자꾸 밀려난다는 겁니다.
왼쪽끝에 닿으면 더이상 왼쪽으로 가지 않는 방법을 누가 가르쳐 주실수 없으신가요.. ㅜ.ㅜ
어쨋든.. 브라우져 크기만 아주 작게 줄이지 않는다면 가운데를 기준으로 얼마든지 같은 위치에 떠 있을 수 있습니다.
그런데 저는 전체적으로 가운데정렬인 홈페이지를 자주 만들다 보니 브라우져의 크기값에 따라 위치가 바뀌는겁니다...
그래서 가운데를 기준으로 레이어를 배치시키도록 소스를 조금 고쳐보았습니다.
물론 아래에 다른분들이 올리신 엔지오식 이동메뉴 구현법과 레이어 가운데 정렬법을 참고하여 소스를 혼합하였습니다.
제가 독자적으로 만든게 아니라는걸 우선 밝히구요.
좀 잘 다루시는 분들에겐 그다지 필요하지 않겠지만..
초보분들도 이 소스를 많이 쓰기를 원하시는 것 같아서 올려봅니다.
아래의 소스는 모두 헤드안에 들어가야 합니다.^^
요점은.. 원래 소스의 좌측 위치를 잡아주는 소스를 빼버리고 가운데값을 계산해주는 스타일을 정의해 주므로써 가운데를 기준으로 정렬할 수 있게 만든다는 겁니다.
------------------------------------------------------------
<!--가운데 값 계산//-->
<style>
#STATICMENU
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
<!--가운데값 계산끝//-->
<script language="javascript">
<!--
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(); // 스크립트 가동
}
}
-->
</script>
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" pos=390>
<!--pos 부분에 숫자값이 위치를 정하는 부분입니다... 가운데를 0으로 하여 왼쪽은 +값, 오른쪽은 -값으로 설정하시면 됩니다//-->
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:190px;">
<tr>
<td style="font-weight:bold; text-align:center;">메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br>메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br></td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
-----------------------------------
잘 모르시는 분들을 위해 보충설명을 드리자면.. 위에 pos 라는 값이 들어가는 부분이 위치를 지정해주는 부분입니다.
pos값이 현재는 390으로 되어 있지요.
가운데를 0으로 두고 왼쪽으로 390픽셀만큼 띄어진 곳에 위치하는 겁니다.
만약 이 부분을 0으로 주면 정가운데에 레이어를 위치시킬 수 있지요.
(이 기준점은 레이어의 사각박스중 왼쪽라인을 기준으로 하는 겁니다)
테스트하실때 pos 값을 여러번 바꾸어서 대입해보고 정확한 위치값을 찾아주세요.
-값으로 쓰시면 가운데를 기준으로 오른쪽으로 이동됩니다.
** 이 소스의 단점은... 레이어가 브라우져의 왼쪽끝에 닿았는데도 불구하고 자꾸 밀려난다는 겁니다.
왼쪽끝에 닿으면 더이상 왼쪽으로 가지 않는 방법을 누가 가르쳐 주실수 없으신가요.. ㅜ.ㅜ
어쨋든.. 브라우져 크기만 아주 작게 줄이지 않는다면 가운데를 기준으로 얼마든지 같은 위치에 떠 있을 수 있습니다.
댓글 11
제목 | 글쓴이 | 날짜 |
---|---|---|
상태바에 링크 주소 99.9% 가리기 - 다른것 [8] | 세죠위그이 | 2003.05.05 |
상태바에 링크 주소 쉽게 99.9999% 가리기 [8] | 최상락 | 2003.05.03 |
또다른 TOP으로 가기 [6] | RedEye | 2003.05.05 |
시디롬 뱉어 내는 스크립.. [2] | 피너츠 | 2003.04.29 |
[! 수정판 !] 일반 자바 스크릅트와 차원이 다른 VB 스크립트 만들기! [10] | 제로보드 | 2003.04.29 |
숫자인지 아닌지 알아보는함수 [1] | 김승태 | 2003.04.27 |
좌표관련메소드모음 [1] | 김승태 | 2003.04.27 |
유용한건 아니지만 마우스 클릭으로 블루스크린띠우기 [3] | 루룿 | 2003.04.25 |
png-24 포맷 알파값 이미지 로딩하기 [9] | D3 | 2003.04.20 |
메뉴이동입니다. [5] | 데빌스텔스 | 2003.04.20 |
간단한 점프메뉴(selecter) [14] | 박재현 | 2003.04.14 |
페이지 프린트 제어 하기 [1] | RedEye | 2003.04.14 |
부라우저 타이틀 제어? [1] | RedEye | 2003.04.14 |
현재 데이터를 읽는 중입니다. 잠시만 기다려주세요~!! | RedEye | 2003.04.12 |
두드려라! 그러면 돌아갈 것이다~ [3] | RedEye | 2003.04.12 |
001 ~ 999 순차적인 리스트 만들기 [8] | 아이쿠 | 2003.04.10 |
현재 접속 시간을 택스트로 뿌려주는 소스... [8] | 이태운 | 2003.04.04 |
Pop-up Window 생성기 [1] | xcool | 2003.04.03 |
프레임에서 버튼으로 타겟 지정하기!! [1] | RedEye | 2003.04.01 |
엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] | 스티치 | 2003.03.29 |