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

How to add a hidden sidebar that only shows when clicked or hovered?

本文关键字：悬停 显示 侧边栏 隐藏 单击 何添加 添加      更新时间：2023-09-26

我正在尝试在我的网站上添加一个隐藏的侧边栏。这正是我想要实现的目标：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;}

j查询：

$(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/这是小提琴。

您需要正确设置绝对位置：

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

只需将left: 0;更改为right: 0; - 这是更新的小提琴：http://jsfiddle.net/yGBkV/

我强烈建议您使用hoverIntent插件 - 用户体验将得到很大改善：

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

这是纯JS和jQuery的混合。

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

这可能应该有效。

只需尝试 

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

JSFIDDLE： http://jsfiddle.net/yztJ8/5/

相关文章：