마우스오버 드롭다운 메뉴

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