javascript – 隐藏的侧边栏,显示悬停

前端之家收集整理的这篇文章主要介绍了javascript – 隐藏的侧边栏,显示悬停前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试创建一个默认隐藏但在悬停时显示侧边栏.我能想到的最接近的例子就是这个:http://www.sidlee.com/.当你在主页之外的任何页面上时,侧边栏显示数字.将鼠标移到此区域后,侧边栏会展开以显示文本.我猜有一种方法可以用JavaScript做到这一点,但我不是专家,所以我虽然有人在这里可以帮助我.

最佳答案
这只是一个简单的例子,但希望它会让你走上正确的轨道:)

CSS:

#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:

如果你想在开始时只显示数字(没有关闭动画onload),改变#nav {width:35px;}并删除.trigger(‘mouseleave’)

干杯

G.

猜你在找的CSS相关文章