Email
PW
Inspired by 위쯔:)
글 등록하기 | 내글 관리하기 | 연재글 | 보관함
반응 좋은 메뉴 스크립트
2009.01.31 05:21 조회 수 9255 추천 수 0
이온디
첨부파일 https://imweb.eond.com/coding/164605
<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>반응 좋은 메뉴 스크립트</title>


    <script type="text/javascript" language="javascript">
    //<![CDATA[
        var subMPrefix = 'sub';
        var openLayer = null;

        function mouseOut(e, mainObj, subObjNo){
            subObj = document.getElementById(subMPrefix + subObjNo);
            if (!e) var e = window.event;
            var coord = getObjCoordinates(mainObj);
            var mouse = getMouseXY(e);
            if(mouse.x < coord.x || mouse.x > coord.x + coord.w || mouse.y < coord.y|| mouse.y > coord.y + coord.h) {
                hideLayer(subObj);
            }
        }

        function getObjCoordinates(obj) {
            var result = new Object();
            result.x = getOffsetLeft(obj);
            result.y = getOffsetTop(obj);
            result.w = obj.offsetWidth;
            result.h = obj.offsetHeight;
            return result;
        }

        function getMouseXY(e) {
            if (!e) var e = window.event;
            var result = new Object();
            result.x = document.all ? event.clientX + (document.body.scrollLeft == 0 ? document.documentElement.scrollLeft : document.body.scrollLeft) : e.pageX;
            result.y = document.all ? event.clientY + (document.body.scrollTop == 0? document.documentElement.scrollTop : document.body.scrollTop) : e.pageY;
            return result;
        }

        function checkMouse(e) {
            if (openLayer != null) {
                if (!e) var e = window.event;
                var tg = (window.event) ? e.srcElement : e.target;
                var obj = openLayer.parentNode;
                while (tg && tg != obj && tg.nodeName != 'BODY') {
                    tg= tg.parentNode;
                }
                if (tg == obj) {
                    return;
                } else {
                    hideLayer(openLayer);
                    openLayer = null;
                }
            }
        }

        function getOffsetLeft (el) {
            var ol = el.offsetLeft;
            while ((el = el.offsetParent) != null) { ol += el.offsetLeft; }
            return ol;
        }

        function getOffsetTop (el) {
            var ot = el.offsetTop;
            while((el = el.offsetParent) != null) { ot += el.offsetTop; }
            return ot;
        }

        function showLayer(objNo) {
            obj = document.getElementById(subMPrefix + objNo);
            obj.style.display = 'block';
            openLayer = obj;
        }

        function hideLayer(obj) {
            obj.style.display = 'none';
        }

        //
        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(document,'mousemove',checkMouse);
    //]]>
    </script>
    
    <!-- document-specific inline style -->
    <style type="text/css">
    /*<![CDATA[*/
        body { font-size: 9pt; margin:0; padding:50px 0 0;}
        #mWrap { position:absolute; }
        .mainM { float: left; background: #eee;  border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; }
        .subM { margin: 8px 0; display:none; }
        .subM div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;}
        .subM div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; }

        .mainM1 { background: #eee;  border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; border-bottom: 0px;}
        .lastM { border-bottom: 1px solid #333;}
        .subM1 { margin: 8px 0; display:none; }
        .subM1 div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;}
        .subM1 div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; }
        div.clear { clear: both; height:0px; font-size:0px; }
    /*]]>*/
    </style>

</head>

 <body>
 <table align="center" width="90%" height="90%" cellspacing="0" border="1" cellpadding="0">
 <tr>
    <td height="30" valign="top">
        <div id="mWrap">
            <div class="mainM" onmouseover="showLayer(1)" onmouseout="mouseOut(event, this, 1)">메인메뉴1
                <div class="subM" id="sub1">
                    <div><a href="#">서브메뉴1</a></div>
                    <div><a href="#">서브메뉴1</a></div>
                    <div><a href="#">서브메뉴1</a></div>
                </div>
            </div>
            <div class="mainM" onmouseover="showLayer(2)" onmouseout="mouseOut(event, this, 2)">메인메뉴2
                <div class="subM" id="sub2">
                    <div><a href="#">서브메뉴2</a></div>
                    <div><a href="#">서브메뉴2</a></div>
                    <div><a href="#">서브메뉴2</a></div>
                </div>
            </div>
            <div class="mainM" onmouseover="showLayer(3)" onmouseout="mouseOut(event, this, 3)">메인메뉴3
                <div class="subM" id="sub3">
                    <div><a href="#">서브메뉴3</a></div>
                    <div><a href="#">서브메뉴3</a></div>
                    <div><a href="#">서브메뉴3</a></div>
                </div>
            </div>
            <div class="mainM" onmouseover="showLayer(4)" onmouseout="mouseOut(event, this, 4)">메인메뉴4
                <div class="subM" id="sub4">
                    <div><a href="#">서브메뉴4</a></div>
                    <div><a href="#">서브메뉴4</a></div>
                    <div><a href="#">서브메뉴4</a></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </td>
 </tr>
<tr>
    <td height="100%">
        <div id="mWrap">
            <div class="mainM1" onmouseover="showLayer(11)" onmouseout="mouseOut(event, this, 11)">메인메뉴1
                <div class="subM1" id="sub11">
                    <div><a href="#">서브메뉴11</a></div>
                    <div><a href="#">서브메뉴11</a></div>
                    <div><a href="#">서브메뉴11</a></div>
                </div>
            </div>
            <div class="mainM1" onmouseover="showLayer(21)" onmouseout="mouseOut(event, this, 21)">메인메뉴2
                <div class="subM1" id="sub21">
                    <div><a href="#">서브메뉴21</a></div>
                    <div><a href="#">서브메뉴21</a></div>
                    <div><a href="#">서브메뉴21</a></div>
                </div>
            </div>
            <div class="mainM1" onmouseover="showLayer(31)" onmouseout="mouseOut(event, this, 31)">메인메뉴3
                <div class="subM1" id="sub31">
                    <div><a href="#">서브메뉴31</a></div>
                    <div><a href="#">서브메뉴31</a></div>
                    <div><a href="#">서브메뉴31</a></div>
                </div>
            </div>
            <div class="mainM1 lastM" onmouseover="showLayer(41)" onmouseout="mouseOut(event, this, 41)">메인메뉴4
                <div class="subM1" id="sub41">
                    <div><a href="#">서브메뉴41</a></div>
                    <div><a href="#">서브메뉴41</a></div>
                    <div><a href="#">서브메뉴41</a></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </td>
 </tr>
 </table>
 </body>
</html>
첨부파일
글목록
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
정말 이 글을 삭제하실건가요? -_-...
닫기
이온디
"반응 좋은 메뉴 스크립트"
취소
Total 235 articles in 6 / 12 pages
번호 제목 제목 날짜날짜
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018/01/03
공지 jQuery를 배울수 있는 동네들입니다. 2013/08/09
공지 관련 링크 [1] 2010/05/23
135 Side 메뉴 2009/01/20
134 팝업형식의 메뉴 네비게이션 2009/01/20
133 [Script] 옆에서 펼쳐지는 레이어 2009/01/20
132 [Script] 부드럽게 슬라이딩 되면서 펼쳐지는 메뉴 (세로, 사이드메뉴) [10] 2009/01/20
131 자바스크립트 TAB 메뉴 2009/01/20
130 [Script] XE Layout Menu Script [1] 2009/01/25
129 [HTML5] dl, dt, dd 용례 2009/01/29
128 [Script] 마우스오버 드롭다운 메뉴 (알릭님 수정본) 2009/01/30
127 [UI] 네이버 홈 개편 [1] 2009/01/31
현재글 반응 좋은 메뉴 스크립트 파일 [2] 2009/01/31
125 [UI] 글읽기 화면의 인터페이스 파일 2009/02/01
124 [HTML5] <hr> 2009/02/02
123 Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) [1] [1] 2009/02/03
122 [Script] 레이어컨트롤 마우스오버 드롭다운 메뉴 [2] 2009/02/10
121 Show-Hide Layers(2) (by 태그매니아) 2009/02/10
120 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철) 2009/02/23
119 [미분류] 특정도메인으로 접속시 원하는도메인으로 리다이렉트 시키기 2010/01/31
118 [웹표준] 웹 표준은 무엇이며, 왜 사용해야 하나요? 2010/12/01
117 [웹표준] 웹 표준, 대체 무슨책을 읽어야 합니까? (by 정찬명) 2010/12/01
116 [웹표준] 실전 웹 표준 가이드(PDF) 파일 2010/12/01
인덱스 태그 설정
[First] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [Last]
글쓰기

해시태그 디렉터리

이온디 랩 바로가기

질문과 답변 바로가기

최근 댓글

최근 추천글

지금 이순간

요즘 태그

오늘의 핫게시물

추천마켓상품 바로가기

제작의뢰/AS요청 바로가기

호스팅신청 바로가기