반응 좋은 메뉴 스크립트

홈페이지 제작팁

HTML5/CSS3

글쓰기

가

반응 좋은 메뉴 스크립트

이온디

2009.01.31 05:21

9218

https://eond.com/164605

object(HotopayModel)#1143 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#1142 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/164605/comment/465387" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(4) { ["document_srl"]=> string(6) "164605" ["comment_srl"]=> string(6) "465387" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

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

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

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

댓글작성칸으로

HTML5/CSS3

가

번호 제목

등록일
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)

웹표준 웹표준 웹표준 웹표준 01/03
공지 jQuery를 배울수 있는 동네들입니다.

jQuery jQuery jQuery jQuery 08/09
공지 관련 링크 1

미분류 미분류 미분류 미분류 05/23
115 [Script] 세로 슬라이드 메뉴

Script Script Script Script 12/13
114 [웹표준] HTML5의 모든 것 1

웹표준 웹표준 웹표준 웹표준 12/02
113 [웹표준] 웹 표준, 대체 무슨책을 읽어야 합니까? (by 정찬명)

웹표준 웹표준 웹표준 웹표준 12/01
112 [웹표준] 웹 표준은 무엇이며, 왜 사용해야 하나요?

웹표준 웹표준 웹표준 웹표준 12/01
111 Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) 1

02/03
110 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철)

Script Script Script Script 02/23
109 [미분류] 특정도메인으로 접속시 원하는도메인으로 리다이렉트 시키기

미분류 미분류 미분류 미분류 01/31
108 [DIV] 이미지 없이 CSS로 둥근 모서리 구현하기 1

DIV DIV DIV DIV 12/31
107 Show-Hide Layers(2) (by 태그매니아)

02/10
106 [Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴

Script Script Script Script 01/20
105 [Script] 옆에서 펼쳐지는 레이어

Script Script Script Script 01/20
104 [Script] 부드럽게 슬라이딩 되면서 펼쳐지는 메뉴 (세로, 사이드메뉴)

Script Script Script Script 01/20
103 [Script] 레이어컨트롤 마우스오버 드롭다운 메뉴

Script Script Script Script 02/10
102 [Script] 마우스오버 드롭다운 메뉴 (알릭님 수정본)

Script Script Script Script 01/30
101 [Script] Show-Hide Layers (by 태그매니아)

Script Script Script Script 01/20
100 [Script] Show-Hide Layers (by 신의키스)

Script Script Script Script 01/19
» 반응 좋은 메뉴 스크립트

01/31
98 [HTML5] <hr>

HTML5 HTML5 HTML5 HTML5 02/02
97 [UI] 글읽기 화면의 인터페이스

UI UI UI UI 02/01
96 [UI] 네이버 홈 개편

UI UI UI UI 01/31

2 3 4 5 6 7 8 9 10 11

글쓰기

댓글 0

즐겨찾는 게시판

전체 게시판

마이페이지

로그인을 해주세요