javascript - 如何添加仅在单击或悬停时显示的隐藏侧边栏？

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/这是 fiddle 。

Answer 1

您需要正确设置绝对定位:

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

只需将 left: 0; 更改为 right: 0; - 这是更新后的 fiddle :http://jsfiddle.net/yGBkV/

我强烈推荐你使用hoverIntent插件——用户体验会提升很多:

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