DIV+CSS仿京东右侧固定悬浮图标导航栏特效-悬浮伸缩

效果图：

（直接截的静态图，图标实际上是类似京东首页的伸缩效果的。）

HTML部分代码：

	    <div class="toolbars">
	    	<ul>
	    		<li class="jdvip">
	    			<i></i>
	    			<a class="toolbars-ico" href="#"></a>
	    			<a class="flex" href="#">京东会员</a>
	    		</li>
	    		<li class="cart">
	    			<a class="toolbars-ico" href="#"></a>
	    			<a class="flex" href="#">购物车</a>
	    		</li>
	    		<li class="follow">
	    			<a class="toolbars-ico" href="#"></a>
	    			<a class="flex" href="#">我的关注</a>
	    		</li>
	    		<li class="message">
	    			<a class="toolbars-ico" href="#"></a>
	    			<a class="flex" href="#">我的消息</a>
	    		</li>
	    		<li class="jimi">
	    			<a class="toolbars-ico" href="#"></a>
	    			<a class="flex" href="#">咨询JIMI</a>
	    		</li>
	    		<li class="feedback">
	    			<a class="toolbars-ico" href="#"></a>
	    			<a class="flex" href="#">反馈</a>
	    		</li>
	    	</ul>
	    	<div class="toolbars-footer">
	    		<a class="toolbars-ico" href="#"></a>
	    		<a class="flex" href="#">顶部</a>
	    	</div>	    	
	    </div>

CSS部分代码：

*{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	color: #666;
}
a:hover{
	color:#f10215!important;
}
body{
	font-size: 12px;
	background-color: #f0f3ef;
}
/*京东右侧固定图标菜单栏*/
.toolbars{
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 6px;
	background-color: #7a6e6e;
}
.toolbars ul{
  	position:absolute;
  	top: 50%;
  	right: 0;
  	transform: translate(0,-40%);
  	z-index: 3;
}
.toolbars ul li{
	width: 34px;
	height: 35px;
	margin-bottom: 2px;
	background-color: #7A6E6E;
	position: relative;
}
.toolbars ul .jdvip .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -88px -175px;
}
.toolbars ul .cart .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -50px 0;
}
.toolbars ul .follow .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -50px -50px;
}
.toolbars ul .message .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -190px -150px;
}
.toolbars ul .jimi .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -50px -150px;
}
.toolbars ul .feedback .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -50px -300px;
}
.toolbars ul .jdvip i{
	position: absolute;
    top: 5px;
    right: 8px;
	width: 6px;
	height: 6px;
	background: url(../img/toolbars.png)no-repeat -150px -150px;	
}
.toolbars-footer{
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #7A6E6E;
	width: 34px;
	height: 35px;
	z-index: 3;
}
.toolbars-footer .toolbars-ico{
	display: block;
	width: 34px;
	height: 35px;
	background: url(../img/toolbars.png)no-repeat -50px -250px;
}
	/*鼠标悬浮后伸出的部分*/
.toolbars .flex{
	position: absolute;
	top: 0;
	right: 34px;
	width: 0;
	overflow: hidden;
	height: 35px;
	line-height: 35px;
	background-color: #b61d1d;
	text-align: center;	
	color: #fff;
	z-index: -1;
	transition: width .3s;
}
	/*鼠标悬浮后的效果*/
.toolbars ul li:hover{
	background-color: #b61d1d;
}
.toolbars ul li:hover .flex{
	width: 62px;
	background-color: #b61d1d;
}
.toolbars ul li:hover i{
	display: none;
}
.toolbars-footer:hover{
	background-color: #b61d1d;
}
.toolbars-footer:hover .flex{
	width: 62px;
	background-color: #b61d1d;
}

图标是用从京东首页下载的精灵图做背景实现的，精灵图附在下面。

前端新人练手之作，分享仅作交流使用，如有更好的实现方法，欢迎留言讨论。