WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁
Script

레이어컨트롤 마우스오버 드롭다운 메뉴
이온디
2009년 02월 10일
마우스오버 드롭다운 메뉴

마우스오버 드롭다운 메뉴로 사용시에는 여러가지 문제로 -_- 다음 변수와 함수를 추가 후 사용해야 하며, 이벤트를 적용하는 엘리먼트의 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>

 
목록 보기
이온디 유한회사 | 사업자번호 : 405-86-01061 | 통신판매신고 : 제2018-대구동구-0767호 [사업자확인]
주소. 대구광역시 동구 안심로16길 71, 5층 502호 / 전화. 0507-1433-0311
ⓒ 2023. EOND. ALL RIGHTS RESERVED. SINCE 2000.6.25
#태그1 #태그2