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

青旅半醒 2022-05-19 01:25 229阅读 0赞

### 效果图： ###

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

![70][]

## **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;
    }

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

![70 1][]

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

[70]: /images/20220519/c6fe547313e64fd1877aa5790965940c.png
[70 1]: /images/20220519/23fab30ced124d699b8c176882b43e28.png