본문 바로가기
셈틀 Com/홈페이지

이동메뉴 구현하기(자바)

by 길목 2002. 10. 24.
<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);
        }


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


        function InitializeStaticMenu()
        {
                if (ReadCookie("ANIMATE") == "false") {
                        ANIMATE.checked = false;
                        STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
                }
                else {
                        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

</div>
<!-- 스크롤 메뉴 정의 끝 -->


<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>





<!-- 스크롤 테스트를 위해 여백을 확보하기 위한 부분... 별 의미는 없음... 실제로 적용시에는 지워 버리세요. -->
<div style="width:50px; height:2500px;"></div>












추가로... On/Off 선택기능이 없는 스크립트 (무조건 스크롤)
-------------------------------------------------------------------------------------



<script language="javascript">
<!--
        var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치
        var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
        var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
        var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
        var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
        var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)


        function RefreshStaticMenu()
        {
                var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;

                stmnStartPoint = parseInt(STATICMENU.style.top, 10);
                stmnEndPoint = document.body.scrollTop + stmnGAP2;
                if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

                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;
                }
                                         else {
                        stmnRefreshTimer = stmnActivateSpeed;
                }

                setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
        }



        function InitializeStaticMenu()
        {
                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>
        <!-- 메뉴부분 끝 -->

</div>
<!-- 스크롤 메뉴 정의 끝 -->


<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>





<!-- 스크롤 테스트를 위해 여백을 확보하기 위한 부분... 별 의미는 없음... 실제로 적용시에는 지워 버리세요. -->
<div style="width:50px; height:2500px;"></div>

관련글

댓글

티스토리툴바