侧边栏在线客服左右滑出

html:

<div class="toolbar">
<ul>
<li class="home"><a href="index.html"><span><i></i></span></a><div class="pop"></div></li>
<li class="first"><a href="javascript:void(0)">开<br/>户<br/>申<br/>请</a><div class="pop"></div></li>
<li class="qq"><a href="javascript:void(0)"><span><i></i></span></a><div class="pop"><a href="javascript:void(0)"><i></i>客服一</a><a href="javascript:void(0)"><i></i>客服二</a><a href="javascript:void(0)"><i></i>客服三</a><a href="javascript:void(0)"><i></i>客服四</a><a href="javascript:void(0)"><i></i>客服五</a></div></li>
<li class="call"><a href="javascript:void(0)"><span><i></i></span></a><div class="pop"><p>4000-802-812</p></div></li>
<li class="code"><a href="javascript:void(0)"><span><i></i></span></a><div class="pop"><img src="images/code.jpg"/></div></li>
<li class="dowm"><a href="javascript:void(0)"><span><i></i></span></a><div class="pop"><p>下载客户端</p></div></li>
<li class="collect"><a href="javascript:void(0)"><span><i></i></span></a><div class="pop"></div></li>
<li class="txt"><a href="javascript:void(0)"><span>简体</a></span></li>
<li class="txt"><a href="javascript:void(0)"><span>繁体</span></a></li>
<li class="up"><a href="#top"><span><i></i></span></a></li>
</ul>
</div>

css:

.toolbar{position:fixed;z-index:3000;top:0px;right:0px;width:40px;height:100%;background:#3b464a;}
.toolbar ul{margin-top:160px;}
.toolbar li{position:relative;text-align:center;}
.toolbar li a{position:relative;display:block;padding:15px 0px 0px 0px;color:#9da3a5;font-size:14px;background:#3b464a;z-index:2;}
.toolbar li span{display:block;width:40px;height:40px;}
.toolbar li:hover span{background:#398fe6;}
.toolbar li.first a{background:#9da3a5;padding:10px 0px 10px 0px;color:#3b464a;}
.toolbar li.first:hover a{background:#398fe6;}
.toolbar li.home a{padding:0px 0px 15px 0px;}
.toolbar li:hover,.toolbar li:hover .pop{background:#398fe6;cursor:pointer;}
.toolbar li:hover a{color:#fff;}
.toolbar li i{display:inline-block;*display:inline;zoom:1;width:26px;height:26px;margin-top:7px;background:url(../images/icon-small.png) no-repeat;}
.toolbar li.home i{background-position:-0px -433px;}
.toolbar li.qq i{background-position:-28px -433px;}
.toolbar li.call i{background-position:-54px -433px;}
.toolbar li.code i{background-position:-82px -433px;}
.toolbar li.dowm i{background-position:-110px -435px;}
.toolbar li.collect i{background-position:-109px -406px;}
.toolbar li.up i{background-position:-75px -407px;}
.toolbar li.home:hover a i{background-position:-0px -193px;}
.toolbar li.qq:hover a i{background-position:-28px -193px;}
.toolbar li.call:hover a i{background-position:-54px -193px;}
.toolbar li.code:hover a i{background-position:-82px -193px;}
.toolbar li.dowm:hover a i{background-position:-110px -195px;}
.toolbar li.collect:hover a i{background-position:-109px -160px;}
.toolbar li.up a:hover i{background-position:-110px -133px;}
.toolbar li.up{margin-top:200px;}
.toolbar li .pop{position:absolute;width:100px;left:40px;margin-top:-40px;line-height:40px;background:#3b464a;z-index:0;}
.toolbar li.qq .pop{margin-top:-86px;}
.toolbar li.code .pop{width:214px;left:40px;margin-top:-124px;}
.toolbar li.code .pop img{margin-top:12px;}
.toolbar li.qq .pop a{padding:0px;color:#fff;font-size:12px;line-height:43px;}
.toolbar li.qq:hover .pop a{background:#398fe6;}
.toolbar li.qq .pop a i{width:18px;height:21px;margin:0px 5px -4px 0px;background-position:-7px -408px;}
.toolbar li .pop p{color:#fff;text-align:center;}
.toolbar li.txt a{padding:10px 0px 0px 0px;}
.toolbar li.txt a span{height:28px;line-height:28px;}

js:

$(document).ready(function () {
$(".toolbar li").mouseenter(function () {
if (this.className == "code") {
$(".pop").eq($(".toolbar li").index(this)).animate({ left: '-214px' }, "100");
} else {
$(".pop").eq($(".toolbar li").index(this)).animate({ left: '-100px' }, "100");
}
});
$(".toolbar li").mouseleave(function () { $(".pop").eq($(".toolbar li").index(this)).animate({ left: '40px' }, "100"); });

})

//别忘记加上jq压缩包<script type="text/javascript" src="js/jquery.min.js"> </script>