<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<style>
body{margin:0px;}
#body-container
{
 z-index:2;
 width:100%;
 margin:0 auto;
 background: url('../../images/menu_left_bg.gif') repeat-x left 59px;
}
*html #body-container
{
 text-align:center;
}
#main-content
{
 width:1002px;
 margin:0 auto;
}
*html #main-content
{
 text-align:left;
}
#head
{
 width:1002px; height:59px;background-color:#ffff00;
}
.main_flash
{
 width:1002px;height:320px;
 margin:0; padding-top:15px;background-color:#999999;
}
#container
{
 width:1002px;
}
#scontainer
{
 clear:both;
 width:1002px;
 z-index:1;
}
#left-wrap
{
 float:left;
 width:200px;  height:1870px;
 margin:0; padding:0 7px 0 5px; background-color:#ff0000;
}
#left
{
 width:188x;
 margin:0; padding:0;
}
#main-wrap
{
 float:left;
 width:540px;  height:1870px;
 margin:0; padding:0; background-color:#666666;
}
#right-wrap
{
 float:left;
 width:202px;  height:1870px;
 margin:0; padding:0 7px 0 7px; background-color:#ade777;
}
#right
{
 width:188px;
 margin:0; padding:0;
}
#quick-wrap
{
 float:left;
 width:60px;
 margin:0; padding:0;
 background-color:#000000;
 z-index:5;
}
#quick
{
 width:57px;
 margin:0; padding:0;
}
.bottom
{
 clear:both:
 margin:0; padding-top:15px;
}/* 컨텐츠 하단 빈공간 */
/* 푸터 */
#body-container02
{
 z-index:2;
 width:100%;
 margin:0 auto;
 background: url('../../images/footer_right_bg.gif') repeat-x left top;
}
*html #body-container02
{
 text-align:center;
}
#footer
{
 clear:both;
 width:1002px; height:203px;
 margin:0;
 background-color:#000000;
}
*html #footer
{
 text-align:left;
}
</style>
<script language='javascript'>
var stmnLEFT   = 942; // 스크롤메뉴의 좌측 위치
var stmnGAP1   = 380; // 페이지 헤더부분의 여백
var stmnGAP2   = 20; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE   = 207; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 1; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed  = 1; // 스크롤되는 속도 (클수록 늦게 움직임)

var stmnTimer;

function setLeft()
{
 if(document.body.clientWidth<1002)
 {
  stmnLEFT = 942;
 }
 else
 {
  stmnLEFT = (document.body.clientWidth-1002)/2+942;
 }
}

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;
 }

 setLeft();
 STATICMENU.style.left = stmnLEFT;
 stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}

function ToggleAnimate()
{
 if (!ANIMATE.checked)
 {
  RefreshStaticMenu();
  SaveCookie("ANIMATE", "true", 300);
 }
 else
 {
  clearTimeout(stmnTimer);
  STATICMENU.style.top = stmnGAP1;
  SaveCookie("ANIMATE", "false", 300);
 }
}

function InitializeStaticMenu()
{
 STATICMENU.style.left = stmnLEFT;

 if (ReadCookie("ANIMATE") == "false")
 {
  ANIMATE.checked = true;
  STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
 }
 else
 {
  ANIMATE.checked = false;
  STATICMENU.style.top = document.body.scrollTop + stmnBASE;
  RefreshStaticMenu();
 }
}

</script>
 </head>
 <body onload='javascript:setLeft();'>
  <div id='body'>
   <div id='body-container'>
    <div id='main-content'>
     <!-- header 시작 -->
     <div id='head'></div>
     <!-- header 끝 -->
     <!-- 컨텐츠 시작 -->
     <div id='container'>
     <!-- 메인플래시 -->
      <div class='main_flash'>메인플래시</div>
      <!-- //메인플래시 -->
      <div id='scontainer'>
       <div id='left-wrap'></div>
       <div id='main-wrap'></div>
       <div id='right-wrap'></div>
       <div id='quick-wrap'>
        <div id='STATICMENU' style='width:57px; height:320px; position:absolute; left:0px; top:0; z-index:6;background-color:#E40EE7;'>배너<br/><input name='checkbox' type='checkbox' id='ANIMATE' onclick='ToggleAnimate();'></div>
       </div>
      </div>
     </div>
    </div>
   </div>
   <div id='body-container02'>
    <!-- 푸터시작 시작 -->
    <div id='footer'></div>
    <!-- 푸터시작 끝 -->
   </div>
  </div>
<script language='javascript'>
<!--
InitializeStaticMenu(); // 스크롤메뉴를 가동하는 자바스크립트
//-->
</script>

 </body>
</html>

이 게시물을