메뉴 보이기
Profile
이온디

2009.02.10

Script

레이어컨트롤 마우스오버 드롭다운 메뉴

조회 수 12546 추천 수 0
마우스오버 드롭다운 메뉴

마우스오버 드롭다운 메뉴로 사용시에는 여러가지 문제로 -_- 다음 변수와 함수를 추가 후 사용해야 하며, 이벤트를 적용하는 엘리먼트의 onmouseout이벤트에는 layerclose('제어할 레이어 아이디')를 지정하고, 타겟 레이어 자체에 onmouseover="layerwaitforclose('제어할 레이어의 아이디')" onmouseout="layerclose('제어할 레이어의 아이디')" 이벤트를 지정.

var layerclosetimer=null;
function layerclose(layerid){
    layerclosetimer=setTimeout("layer('"+layerid+"')",100);
}
function layerwaitforclose(layerid){
    clearTimeout(layerclosetimer);
}

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>레이어 컨트롤 샘플3</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
  6. <meta http-equiv="imagetoolbar" content="no">
  7. <style type="text/css">
  8. body{
  9.     font-family:tahoma;
  10.     font-size:0.74em;
  11.     color:#000;
  12.     margin:0;
  13.     padding:0;
  14. }
  15.  
  16. #dropdown{
  17.     position:absolute;
  18.     left:50%;
  19.     top:10px;
  20.     width:100px;
  21.     line-height:1.3em;
  22.     margin-left:-55px;
  23.     padding:1px 5px;
  24.     border:1px solid #BBB;
  25.     background:#FFF;
  26.     cursor:pointer;
  27. }
  28. #dropdownlayer{
  29.     position:absolute;
  30.     width:106px;
  31.     line-height:1.3em;
  32.     padding:2px;
  33.     border:1px solid #BBB;
  34.     background:#FFF;
  35.     display:none;
  36. }
  37. #dropdownlayer a{
  38.     padding:1px 3px;
  39.     display:block;
  40. }
  41. #dropdownlayer a:hover{
  42.     background:#EEE;
  43. }
  44. </style>
  45. <script type="text/javascript">
  46. var layerclosetimer=null;
  47. function layerclose(layerid){
  48.     layerclosetimer=setTimeout("layer('"+layerid+"')",100);
  49. }
  50. function layerwaitforclose(layerid){
  51.     clearTimeout(layerclosetimer);
  52. }
  53. function layer(layerid,target,xpos,ypos,isoverevent){
  54.  
  55.     // 위치 제어가 가능한 레이어 컨트롤.
  56.     // http://www.psyonline.kr
  57.  
  58.     try{clearTimeout(layerclosetimer)}catch(error){}
  59.     var obj=document.getElementById(layerid);
  60.     if(!obj.style.display || obj.style.display=='none'){
  61.         var targetinfo=[target.offsetWidth,target.offsetHeight,0,0];
  62.         for(var i=0; i<1; i++){
  63.             targetinfo[2]+=target.offsetLeft;
  64.             targetinfo[3]+=target.offsetTop;
  65.             target=target.offsetParent;
  66.             if(target.tagName.toLowerCase()!='body' && target.tagName.toLowerCase()!='html') i--;
  67.         }
  68.         obj.style.display='block';
  69.         var objinfo=[obj.offsetWidth,obj.offsetHeight];
  70.         obj.style.display='none';
  71.         if(xpos || ypos){
  72.             if(xpos){
  73.                 if(!isNaN(xpos)) setleft(xpos);
  74.                 else{
  75.                     var xpospm;
  76.                     if(xpospm=xpos.match(/([a-z-]+)(\-|\+)([0-9]+)/)) xpos=xpospm[1];
  77.                     if(xpos=='left') setleft(targetinfo[2]-objinfo[0]);
  78.                     else if(xpos=='justify-left') setleft(targetinfo[2]);
  79.                     else if(xpos=='right') setleft(targetinfo[2]+targetinfo[0]);
  80.                     else if(xpos=='justify-right') setleft((targetinfo[2]+targetinfo[0])-objinfo[0]);
  81.                     else if(xpos=='center') setleft((targetinfo[2]+(targetinfo[0]/2))-(objinfo[0]/2));
  82.                 }
  83.             }
  84.             if(ypos){
  85.                 if(!isNaN(ypos)) settop(ypos);
  86.                 else{
  87.                     var ypospm;
  88.                     if(ypospm=ypos.match(/([a-z-]+)(\-|\+)([0-9]+)/)) ypos=ypospm[1];
  89.                     if(ypos=='top') settop(targetinfo[3]-objinfo[1]);
  90.                     else if(ypos=='justify-top') settop(targetinfo[3]);
  91.                     else if(ypos=='bottom') settop(targetinfo[3]+targetinfo[1]);
  92.                     else if(ypos=='justify-bottom') settop((targetinfo[3]+targetinfo[1])-objinfo[1]);
  93.                     else if(ypos=='middle') settop((targetinfo[3]+(targetinfo[1]/2))-(objinfo[1]/2));
  94.                 }
  95.             }
  96.         }else{
  97.             if(xpos===0) setleft(xpos);
  98.             if(ypos===0) settop(ypos);
  99.         }
  100.         obj.style.display='block';
  101.     }else{
  102.         if(!isoverevent) obj.style.display='none';
  103.     }
  104.  
  105.     function setleft(value){
  106.         if(xpospm) value=eval('value'+xpospm[2]+xpospm[3]);
  107.         obj.style.left=value+'px';
  108.     }
  109.  
  110.     function settop(value){
  111.         if(ypospm) value=eval('value'+ypospm[2]+ypospm[3]);
  112.         obj.style.top=value+'px';
  113.     }
  114.  
  115. }
  116. </script>
  117. </head>
  118.  
  119. <body>
  120.  
  121. <div id="dropdown" onmouseover="layer('dropdownlayer',this,'justify-left','bottom+2',true)" onmouseout="layerclose('dropdownlayer')">Drop Down</div>
  122. <div id="dropdownlayer" onmouseover="layerwaitforclose('dropdownlayer')" onmouseout="layerclose('dropdownlayer')">    
  123.     <a href="#">Case 1</a>
  124.     <a href="#">Case 2</a>
  125. </div>
  126.  
  127. </body>
  128. </html>

Profile
0
Lv

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(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 19738
116 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철) 2009.02.23 9872
115 Show-Hide Layers(2) (by 태그매니아) 2009.02.10 8744
[Script] 레이어컨트롤 마우스오버 드롭다운 메뉴 2 2009.02.10 12546
113 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