메뉴 보이기
Profile
이온디

2009.02.03

Show-Hide Layers 클릭한 걸 기억하는 (by 알릭)

조회 수 6867 추천 수 0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <meta http-equiv=cache-control content=no-cache>
    <meta http-equiv=pragma    content=no-cache>

    <!-- title -->
    <title>No title</title>

    <!-- stylesheets -->
    <!-- <link rel=stylesheet href="" type="text/css" title="Global CSS"> -->

    <!-- global script -->

    <script type="text/javascript" language="javascript">
    //<![CDATA[
        var totalmenu = 3; //서브메뉴 총합
        function showmenu(no) {
            for(i=1;i<=totalmenu;i++) {
                if(i==no) {
                    document.getElementById('submenu_'+i).style.visibility = 'visible';
                } else {
                    document.getElementById('submenu_'+i).style.visibility = 'hidden';
                }
            }
        }

        function hidemenu() {
            for(i=1;i<=totalmenu;i++) {
                    document.getElementById('submenu_'+i).style.visibility = 'hidden';
            }
            initMenu();
        }
        
        function clickmenu(no) {
            createCookie('selectedmenu', no,100);
        }

        function checkMouse(e) {
            var openmenu = document.getElementById('menuarea');
            if (openmenu) {
                if (!e) var e = window.event;
                var tg = (window.event) ? e.srcElement : e.target;
                var obj = openmenu;
                while (tg && tg != obj && tg.nodeName != 'BODY') {
                    tg= tg.parentNode;
                }
                if (tg == obj) {
                    return;
                } else {
                    hidemenu();
                }
            }
        }

        function initMenu() {
            var cookieValue = readCookie('selectedmenu');
            if(cookieValue && cookieValue.length>0 && cookieValue<=totalmenu){
                showmenu(cookieValue);
            } else {
                showmenu(1);
            }
        }

        function createCookie(name,value,days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
            }
            else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }

        //
        function addEvent( obj, type, fn ) {
            if (obj.addEventListener) {
                obj.addEventListener( type, fn, false );
                EventCache.add(obj, type, fn);
            }
            else if (obj.attachEvent) {
                obj["e"+type+fn] = fn;
                obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
                obj.attachEvent( "on"+type, obj[type+fn] );
                EventCache.add(obj, type, fn);
            }
            else {
                obj["on"+type] = obj["e"+type+fn];
            }
        }

        var EventCache = function(){
            var listEvents = [];
            return {
                listEvents : listEvents,
                add : function(node, sEventName, fHandler){
                    listEvents.push(arguments);
                },
                flush : function(){
                    var i, item;
                    for(i = listEvents.length - 1; i >= 0; i = i - 1){
                        item = listEvents[i];
                        if(item[0].removeEventListener){
                            item[0].removeEventListener(item[1], item[2], item[3]);
                        };
                        if(item[1].substring(0, 2) != "on"){
                            item[1] = "on" + item[1];
                        };
                        if(item[0].detachEvent){
                            item[0].detachEvent(item[1], item[2]);
                        };
                        item[0][item[1]] = null;
                    };
                }
            };
        }();
        addEvent(window,'unload',EventCache.flush);
        //

        addEvent(window,'load',initMenu);
        addEvent(document,'mousemove',checkMouse);

        function eraseCookie(name) {
    createCookie(name,"",-1);
}

    //]]>
    </script>
    
    <!-- document-specific inline style -->
    <style type="text/css">
    /*<![CDATA[*/
        body { font-size: 9pt;}
        #mainmenu { border:1px solid red; height: 20px;  }
        #submenu { border:1px solid blue; height: 20px; }
        .submenus { position: absolute; visibility: hidden;}

        #submenu_1 { padding: 0;}
        #submenu_2 { padding: 0 0 0 52px;}
        #submenu_3 { padding: 0 0 0 104px;}
    /*]]>*/
    </style>

</head>

 <body>
  <div id="menuarea">
    <div id="mainmenu"><a href="#" onclick="clickmenu(1);" onmouseover="showmenu(1)">main 1</a> | <a href="#" onclick="clickmenu(2);" onmouseover="showmenu(2)">main 2</a> | <a href="#" onclick="clickmenu(3);"onmouseover="showmenu(3)">main 3</a></div>
    <div id="submenu">
        <div id="submenu_1" class="submenus"><a href="#" onclick="clickmenu(1);">sub 1-1</a> || <a href="#" onclick="clickmenu(1);">sub 1-2</a> || <a href="#" onclick="clickmenu(1);">sub 1-3</a></div>
        <div id="submenu_2" class="submenus"><a href="#" onclick="clickmenu(2);">sub 2-1</a> || <a href="#" onclick="clickmenu(2);">sub 2-2</a> || <a href="#" onclick="clickmenu(2);">sub 2-3</a></div>
        <div id="submenu_3" class="submenus"><a href="#" onclick="clickmenu(3);">sub 3-1</a> || <a href="#" onclick="clickmenu(3);">sub 3-2</a> || <a href="#" onclick="clickmenu(3);">sub 3-3</a></div>
    </div>
  </div>
 </body>
</html>
Profile
0
Lv

1개의 댓글

Profile
이온디
2010.11.18

<DIV align=left>

<BUTTON onclick="Engine_DIV.style.visibility='visible'">OPEN</BUTTON>

</DIV>

 

<DIV id=Engine_DIV style="VISIBILITY: visible; width: 550px; height: 200px; BORDER-RIGHT: #E8E8E8 1px solid; BORDER-TOP: #E8E8E8 1px solid; BORDER-LEFT: #E8E8E8 1px solid; BORDER-BOTTOM: #E8E8E8 1px solid; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; PADDING-BOTTOM: 5px">


<br><br><br><br><br><br><br><br><br>


<DIV align=right>

<BUTTON  onclick="Engine_DIV.style.visibility='hidden'">CLOSE</BUTTON>

</DIV>

 

</DIV>
CLOSE

 

감추기(hidden) 형

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
119 [Script] 세로 슬라이드 메뉴, 마우스 오버 1 2012.12.13 5991
118 [Script] 세로 슬라이드 메뉴 2012.12.13 7559
117 [미분류] 특정도메인으로 접속시 원하는도메인으로 리다이렉트 시키기 2010.01.31 19739
116 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철) 2009.02.23 9872
115 Show-Hide Layers(2) (by 태그매니아) 2009.02.10 8744
114 [Script] 레이어컨트롤 마우스오버 드롭다운 메뉴 2 2009.02.10 12546
Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) 1 1 2009.02.03 6867
112 [HTML5] <hr> 2009.02.02 8785
111 [UI] 글읽기 화면의 인터페이스 2009.02.01 7529
110 반응 좋은 메뉴 스크립트 2 2009.01.31 9152
109 [UI] 네이버 홈 개편 1 2009.01.31 7539
108 [Script] 마우스오버 드롭다운 메뉴 (알릭님 수정본) 2009.01.30 9610
107 [HTML5] dl, dt, dd 용례 2009.01.29 9762
106 [Script] XE Layout Menu Script 1 2009.01.25 5964
105 자바스크립트 TAB 메뉴 2009.01.20 10248
104 [Script] 부드럽게 슬라이딩 되면서 펼쳐지는 메뉴 (세로, 사이드메뉴) 10 2009.01.20 14196
103 [Script] 옆에서 펼쳐지는 레이어 2009.01.20 6155
102 팝업형식의 메뉴 네비게이션 2009.01.20 4649
101 Side 메뉴 2009.01.20 4287