클릭하거나 마우스를 올렸을 때만 표시되는 숨겨진 메뉴를 추가하는 방법은 무엇입니까?

Question

내 웹 사이트에 숨겨진 메뉴를 추가하려고합니다. 이것이 정확히 달성하고자하는 목표입니다. http://demo.themebeans.com/pinto/하지만 클릭 대신 마우스를 올리면됩니다. 그냥 클릭 대신 ... 그냥 내 방문자가 그냥 마우스로 가리 키도록하십시오.

여기까지 제가 지금까지 있습니다. 위에 주어진 샘플과 동일하게 배치되기를 바랍니다. :(누군가가 도와 줄 수

#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;} 
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;} 
#nav a span{margin:0 10px 0 0;} 
#nav a{color:#fff;font-size:14px;text-decoration:none;} 

jQuery를 :

$(function(){ 
$('#nav').hover(function(){ 
    $(this).animate({width:'200px'},500); 
},function(){ 
    $(this).animate({width:'35px'},500); 
}).trigger('mouseleave'); 
}); 

HTML :.

<div id="nav"> 
Contents of the sidebar like the one on my sample. 
</div> 

http://jsfiddle.net/yztJ8/ 여기 여기

Answer 1

당신은 제대로 절대 위치를 설정해야합니다

#nav { position: absolute; top: 0px; right: 0px; } 

그냥 left: 0;right: 0;에 변경 - 여기에 업데이트 된 바이올린입니다 : http://jsfiddle.net/yGBkV/

난 강력하게 당신이 hoverIntent 플러그인을 사용하는 것이 좋습니다 - 사용자를 경험이 많이 향상 될 것입니다 :

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

바이올린의 순수 JS와 jQuery를의 혼합이다.

(function() { 
    var oNav = document.getElementById('nav'); 
    oNav.addEventListener('hover', function() { 
     $('#nav').fadeIn(); 
    }, false); 
})(); 

아마도 작동 할 것입니다.

Answer 3

단순히

$('#nav1').bind("mouseenter", function() { 
    $('#nav').animate({width:'200px'},500); 
}); 
$('#nav1').bind("mouseleave", function() { 
    $('#nav').animate({width:'0px'},500); 
}); 

jsfiddle을 시도 : http://jsfiddle.net/yztJ8/5/