하단에 보시면 요란한 색갈의 박스를 보실수 있습니다. 그 박스는 50px로 나눠져 있으며 해당 칸으로 마우스를 이동시 그 칸의 메뉴가 확장되는 형식입니다.

 

그런데 이놈의 인터발이 종료가 안되고 자꾸 진행되네요..

 

자바스크립트를 하나도 할줄 몰라서 코드도 쫌 수레기이지만.. 도와주세욤 ㅠㅠ

 

 

 

 

 

<script type="text/javascript">
    var mainframe22 = new String();
    var menu_stats = Array(1,1,1,1,1,1,1);
    var menu_active = Array(1,1,1,1,1,1,1);
    var active_frame = new String();
    
//menu_stats1~6은 각 바의  왼쪾위치인지 오른쪽 위치인지 파악
//menu_active1~6은 각 바의 활동중인지 멈춰있는지 파악
//destination 각 바의 목적지

 

function main_frame (this_div){
 
 
 
    
    for( i=1 ; i <= 6 ; i++ ){
     
     if(this_div == 1){
      var destination = new Array(1,0,550,600,650,700,750);
      menu_stats[1] = 2;
      menu_stats[2] = 1;
      menu_stats[3] = 1;
      menu_stats[4] = 1;
      menu_stats[5] = 1;
      menu_stats[6] = 1;
     }
     if(this_div == 2){
      var destination = new Array(1,0,50,600,650,700,750);
      menu_stats[1] = 2;
      menu_stats[2] = 2;
      menu_stats[3] = 1;
      menu_stats[4] = 1;
      menu_stats[5] = 1;
      menu_stats[6] = 1;
     }
     if(this_div == 3){
      var destination = new Array(1,0,50,100,650,700,750);
      menu_stats[1] = 2;
      menu_stats[2] = 2;
      menu_stats[3] = 2;
      menu_stats[4] = 1;
      menu_stats[5] = 1;
      menu_stats[6] = 1;
     }
     if(this_div == 4){
      var destination = new Array(1,0,50,100,150,700,750);
      menu_stats[1] = 2;
      menu_stats[2] = 2;
      menu_stats[3] = 2;
      menu_stats[4] = 2;
      menu_stats[5] = 1;
      menu_stats[6] = 1;
     }
     if(this_div == 5){
      var destination = new Array(1,0,50,100,150,200,750);
      menu_stats[1] = 2;
      menu_stats[2] = 2;
      menu_stats[3] = 2;
      menu_stats[4] = 2;
      menu_stats[5] = 2;
      menu_stats[6] = 1;
     }
     if(this_div == 6){
      var destination = new Array(1,0,50,100,150,200,250);
      menu_stats[1] = 2;
      menu_stats[2] = 2;
      menu_stats[3] = 2;
      menu_stats[4] = 2;
      menu_stats[5] = 2;
      menu_stats[6] = 1;
     }
      
     var active_frame = String("main_"+i);
     
     if(menu_active[i]== 1){
      
      if(menu_stats[i] == 1 ){
        
       if(document.getElementById(active_frame).style.left !=destination[i])
       {
        
         if(parseInt(document.getElementById(active_frame).style.left) < destination[i]){
          document.getElementById(active_frame).style.left=parseInt(document.getElementById(active_frame).style.left)+2;
         }else{
          document.getElementById(active_frame).style.left=destination[i];
 
          menu_active[i] = 0;//움직임 종료
         }
        
       }else{menu_active[i] = 0;}
       
      }else if(menu_stats[i] == 2 ){
       
       if(document.getElementById(active_frame).style.left !=destination[i])
       {
       
         if(parseInt(document.getElementById(active_frame).style.left) > destination[i]){
          document.getElementById(active_frame).style.left=parseInt(document.getElementById(active_frame).style.left)-2;
         }else{
          document.getElementById(active_frame).style.left=destination[i];
          menu_active[i] = 0;//움직임 종료
         }
         
       }else{menu_active[i] = 0;}
       
      }
      
     }
      
    }

    if(menu_active[1] == 0 && menu_active[2] == 0 && menu_active[3] == 0 && menu_active[4] == 0 && menu_active[5] == 0 && menu_active[6] == 0)
    {
     clearInterval(mainframe22);
     menu_active[1] = 1;
     menu_active[2] = 1;
     menu_active[3] = 1;
     menu_active[4] = 1;
     menu_active[5] = 1;
     menu_active[6] = 1;
    }

}

</script>

 

  <style type="text/css">
   *{margin:0;padding:0;}
  
   #mainframe{position: relative;left:100px;top:50px; overflow:hidden; width:800; height:300px; border:solid #000000 3px }
  
   #mainframe li {
    float:left;
    position:absolute;
   
   }
  
 
  </style>

    <div id="mainframe">
   
    <ul>
    <li style="background-color:red;width:800px;height:300px;position:absolute;left:0px" id="main_1" onmouseover='javascript:clearInterval(mainframe22);mainframe22=setInterval("main_frame(1)",1);'>aa</li>
    <li style="background-color:yellow;width:800px;height:300px;position:absolute;left:50px" id="main_2" onmouseover='javascript:clearInterval(mainframe22);var mainframe22 = setInterval("main_frame(2)",1);'>asdf</li>
    <li style="background-color:blue;width:800px;height:300px;position:absolute;left:100px" id="main_3" onmouseover='javascript:clearInterval(mainframe22);var mainframe22 = setInterval("main_frame(3)",1);'>asdfa</li>
    <li style="background-color:#999;width:800px;height:300px;position:absolute;left:150px" id="main_4" onmouseover='javascript:clearInterval(mainframe22);var mainframe22 = setInterval("main_frame(4)",1);'>asdf</li>
    <li style="background-color:#0CF;width:800px;height:300px;position:absolute;left:200px" id="main_5" onmouseover='javascript:clearInterval(mainframe22);var mainframe22 = setInterval("main_frame(5)",1);'>dfas</li>
    <li style="background-color:#336;width:800px;height:300px;position:absolute;left:250px" id="main_6" onmouseover='javascript:clearInterval(mainframe22);var mainframe22 = setInterval("main_frame(6)",1);'>asdf</li>
    </ul>
   
    </div>