Jquery实现像百度分享一样的侧边导航栏

一直想找一个像百度分享, Jiathis 一样固定的侧边, 鼠标滑过会显示,滑出又会隐藏的侧过导航栏, 这样的jquery插件, 没有找到, 只有自己大概的写了一个, 差不多的功能都实现了.

百度分享的侧边导航栏

先用CSS把整个块固定在侧边高度适合的位置:

#box-cl{text-align:left;position: fixed;
width: auto;height: auto;
top: 100px;right:0px;}

控制显示和隐然的js代码:

<script type=”text/javascript”>
$(function() {
/**
* 滑过显示,滑出隐藏
*/
$(‘#box-cl’).live(‘mouseenter’,function () {
$(‘#sideBarContents’).slideToggle();
$(‘#sideBarImg’).hide();
$(‘#sideBarImg-a’).show();
}).live(‘mouseleave’,function () {
$(‘#sideBarContents’).slideToggle();
$(‘#sideBarImg-a’).hide();
$(‘#sideBarImg’).show();
});

});
</script>

效果演示:  http://www.dengor.com/share/cl_dengor/

Jquery侧边导航栏

可以看得出来用jquery可以很容易实现这样的效果.

代码打包下载:  cl_dengor.zip

原创文章 转载请注明出处: 登高望远
[http://www.dengor.com/archives/1514.html]