... 하나

Question

http://www.antisweden.no/

나는 메뉴를 사랑하고 나는 그것을 할 수 있도록하려면?

감사

Answer 1

오늘 밤 나중에 작업 할 때까지 약간의 부분적인 해결책이 있습니다.
http://jsfiddle.net/nickywaites/jVDUX/

아마도 mouseleave 이벤트에 시간 초과를 설정하고 다시 마우스를 가져 가면 지울 필요가 있습니다.

---

업데이트 예

http://jsfiddle.net/nickywaites/jVDUX/5/

$(function() { 

var timeout; 
var menucontent = $("#menucontent"); 
$('#menu').mouseenter(function() { 
    clearTimeout(timeout); 
    menucontent.animate({ 
     marginLeft: '-550px' 
    }, 1000); 
}); 

menucontent.mouseenter(function() { 
    clearTimeout(timeout); 
}); 

menucontent.mouseleave(function() { 
    timeout = setTimeout(function() { 
     menucontent.animate({ 
      marginLeft: '50px' 
     }, 1000); 
    }, 3000); 
}); 

}); 

HTML

<div id="body"> 
<div id="menu"> 
    <div id="menucontent"> 
     <ul> 
      <li><a href="#content1">Link1</a></li> 
      <li><a href="#content2">Link2</a></li> 
      <li><a href="#content3">Link3</a></li> 
      <li><a href="#content4">Link4</a></li> 
      <li><a href="#content5">Link5</a></li> 
      <li><a href="#content6">Link6</a></li>    
     </ul>   
    </div> 
</div> 

CSS

#body { 
    height:800px; 
    width:600px; 
    border:1px solid black; 
    overflow:hidden; 
} 

#menu { 
    position:relative; 
    top: 100px; 
    float:right; 
    background-color:black; 
    width:50px; 
    height:50px; 
    color:white; 
} 

#menucontent { 
    width:550px; 
    height:100%; 
    margin-left:700px; 
    background-color:black; 
} 

#menucontent ul{ 
    margin: 0; 
    padding: 0; 
    height:100%; 
    float: left;} 

#menucontent ul li{ 
    display: inline; 
    height:100%; 
} 

#menucontent ul li a{ 
    color:white; 
    float: left; 
    text-decoration: none; 
    padding: 10px 10px; 
    height:30px; 
} 

#menucontent ul li a:visited{} 

#menucontent ul li a:hover { 
    background-color:#0b75b2; 
} 

Answer 2

는 "소스보기"는 항상 시작하기에 좋은 장소입니다. FireBug 또는 IE 8+ Developer Tools와 같은 도구를 사용하여 사이트에서 수행하는 작업을 확인할 수도 있습니다.