javascript - 悬停时显示的隐藏侧边栏

Question

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

Answer 1

这只是一个简单的示例，但希望它能让您走上正确的轨道:)

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:

<div id="nav">
<ul>
<li><a href=""><span>01</span> HomePage</a></li>
<li><a href=""><span>02</span> SubPage 1</a></li>
<li><a href=""><span>03</span> SubPage 2</a></li>
<li><a href=""><span>04</span> SubPage 3</a></li>
<li><a href=""><span>05</span> SubPage 4</a></li>
</ul>
</div>

如果您只想在开始时显示数字(没有关闭动画 onload)，请更改 #nav{width:35px;} 并删除 .trigger('mouseleave')

干杯

G.