웹마스터 팁
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
-
스티치
2003.03.31 10:30
-
신선덕
2003.03.30 01:39
설명도 잘해놓으시구 너무너무 고맙습니다 -
구쭌
2003.03.30 02:04
감사합니다 !!!!! -
이성진
2003.03.30 23:43
fuck you, bush에 추천한방. -
niistyle
2003.03.31 00:03
오..굿잡.. 한번 시도해보게쑴돠~!! -
에취에스비
2003.04.14 12:19
너무 감사합니다. 덕분에 쉽게 해결했습니다. -
mynix
2003.05.27 00:47
원프레임 제로보드 삽입시 삽입된 슬라이딩메뉴가 없어지는데 무엇때문일까요 ㅡㅡ;
물론 일반적인 html에서나 최근게시물을 뽑을때도 이상은 없는데 헤더와 푸더를 사용하면 잘안된다는;;; -
로엠
2003.05.30 20:32
팁 감사합니다.
저는 센터정렬해서 오른쪽에 배너등을 이동레이어로 사용할려고 하는데 말씀하신것과같이 브라우져 오른쪽 끝에 닿았는데 안쪽으로 쏠리는 현상이 있네요.
1024해상도로 작업을해서 그 이하의 해상도에선 전체화면을해도 밀려서보이게되고 또 최적해상도보다 크다하더라도 브라우져창을 작게하여 싸이트를 보는 사람도 밀려서 보이네요..
나름대로 노력을 하다가 실패를 했습니다.
http://www.lotte.com/의경우에는 중앙에서 오른쪽으로 이동레이어를 구현했던데 이런현상이 없네요..
어떤 차이가 있을까요? -
조상현
2004.03.23 12:33
히야아암 ^0^ 고압습니다 잘쓸께요 한방에 성공적으로 적용이 +_+ -
바보앙마
2004.05.05 12:18
오우..굿팁..원츄~~!! -
사탕
2008.04.28 11:01
음 ... 중앙 정렬시 고정이 되긴 헌데 중앙정렬 위치가 800 사이즈로 고정된듯 한데 800 사이즈가 넘어 버리면 예가 어긋나네요 혹시 800이상 사이즈에서 중앙정렬 시 어떤부분을 만져줘야 할지;; 즉 상단 해더 부분의 테이블 크기가 800px면 딱 넘지 않고 고정되는데 중앙정렬시 살짜만 오바해도 예가 삑살이 나네요 암튼 감사드려요 ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
일년치 달력을 한꺼번에 보자!!! [4] | 未淚 | 2005.08.07 |
자기계정에서 file()가 잘안될때.... [5] | 이진환님 | 2005.08.18 |
이쁜 달력소스입니다.
[2]
![]() | 최문혁 | 2005.09.05 |
예전에 책원고로 만들었던것인데 필요한분 사용하세요
[7]
![]() | 유창화 | 2005.10.22 |
주민등록번호 진위확인
[5]
![]() | 엔시™ | 2005.11.08 |
[PHP 동영상강좌] 1. HTML이란 무엇인가! [22] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 2. 하이퍼링크, 테이블태그의 사용방법 [15] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 3. 테이블 태그의 심화 [10] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 4. 스타일 시트 [17] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 5. 웹서버/웹브라우져/PHP란 무엇인가 [12] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 6. Hello PHP [14] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 7. Get방식을 이용한 변수의 전달 [12] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 8. Get방식의 전달과 테이블, 스타일태그의 사용 [13] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 9. form태그를 이용한 값의 전달 [15] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 10. 그외의 form관련 태그들 [16] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 11. 메일 발송하기 [16] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 12. IF문의 사용 [6] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 13. IF문을 이용한 수우미양가 출력하기 [10] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 14. 여러개의 파일을 거쳐서 값전달하기 [7] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 15. 여러개의 파일을 이용한 설문조사 [7] | 서기 | 2005.11.23 |
원소스를 여기에 제공하신 다른분들께 더욱 감사해야 할따름입니다.