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/

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

3 个答案: