Ripro主题侧边导航条美化纯代码教程

/* 跟随 样式开始 */
@media (max-width: 767px) {
	.search-form{
		display: none
	}
}

.float-radius{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.float-text{color:#282828} /* 字体颜色 */
.ripro-dark a.float-text{color:#282828} /* 夜晚模式字体颜色 */
.float-icon{color:#0056ff} /* 图标颜色 */
.float-hover{color:#0056ff} /* 鼠标掠过字体颜色 */
.flost-hover-bg{background-color:#0056ff} /* 鼠标掠过背景颜色 */
.float-border{border-color:#ececec !important} /* 边框颜色 */
.float-box{
	width:68px;	/* 宽度 修改之后要修改float-alert-box里的right值，right值计算方式：此数值减去（5*2+2） */
	padding:5px;/* 按钮框边缘留出像素 */
	font-size:14px;/* 按钮字体大小 */
	position:fixed;right:0;top:75%;z-index:9997;
	margin-top:-303px;	/* 自身高度的一半 */
	_position: absolute;_top:expression(eval(document.documentElement.scrollTop+100));	/* 兼容低版本IE */
}
.float-ul,.float-ul li{margin:0;padding:0;}
.float-ul{margin-top:5px;text-align:center;line-height:1.2;list-style:none;background-color:#FFF;box-shadow: 0 2px 5px #e6e6e6;}
.float-ul .iconfont{font-size:22px;line-height:22px;}
.float-ul li a{display:block;width:100%;padding:10px 0;line-height:18px;}
.float-ul li a{color:#282828;}
.float-ul li a:hover{
  background: linear-gradient(-125deg,#ffe300 0%, #ffd001 100%);box-shadow: 0 8px 10px rgba(255, 219, 32, 0.2);color:#282828;}
.float-ul li a.qq{-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px;position: relative;}
.float-ul li a.weixin{position: relative;}
.float-ul li a.fankui{-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
.float-ul li a.fankui .iconfont{font-size:22px;line-height:22px;}
.float-alert-box{width:180px;height:185px;background-color:#FFF;border:1px solid #ececec;position: absolute;right:56px;top:0;z-index:9998;display:none;}
.srcdict_qd_1:hover {
    background: #ffffff;
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
    color: #0295f9;
}

.srcdict_qd_1{
    background: linear-gradient(-125deg,#ffe300 0%, #ffd001 100%);
    box-shadow: 0 8px 10px rgba(255, 219, 32, 0.3);
    color: #282828;
}
.float-qq-box{padding:20px 15px;}
.float-weixin-box{padding:15px;}
.float-weixin-box img{margin:0 auto;}
.float-weixin-box p{font-weight:600;color:#282828;margin-bottom:5px;}
.float-alert-box h6{font-size:20px;color:#282828;}
.float-alert-box p{line-height:24px;}
.float-ul li .float-qq-box{color:#666;}
.float-ul li .float-weixin-box{color:#666;top:-61px;}
.float-qq-btn{padding:10px;background-color:#ffd001;color:#282828;}
@media screen and (max-width:639px){.float-box{display:none;}}
/* 跟随 样式结束 */

<!--右侧跟随导航开始-->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1444248_u240hsu9sns.css">
<div class="float-box">
  	<ul class="float-ul float-radius float-text">
      <li>
      <?php if (_cao('is_qiandao','1')) : ?>
            <a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="打卡签
到">
                <?php if (_cao_user_is_qiandao()) {
                    echo '<i class="iconfont icon-Sign"></i><br>已签';
                }else{
                    echo '<i class="iconfont icon-Sign"></i><br>签到 ';
                }
                ?>
                
                
            </a>
            <?php endif; ?>
                               

		</li>
	</ul>
  
	<ul class="float-ul float-radius float-text">
		<li>
			<a class="qq float-border float-text" href="javascript:void(0);">
				<i class="iconfont icon-qq"></i><br>客服				
				<div class="float-alert-box float-radius float-qq-box" style="display: 
none;">
					<h6>工作时间</h6>
					<p>工作日：9:00 - 18:00<br>节假日：9:00 - 18:00</p>
					<div class="float-qq-btn float-radius" onclick="window.open
('https://wpa.qq.com/msgrd?v=3&amp;uin=348047301&amp;site=qq&amp;menu=yes','_blank')">点击咨询客服</div>
				</div>
			</a>
		</li>
	</ul>
	<ul class="float-ul float-radius float-text">
				<li>
			<a class="fankui float-border float-text" href="https://wpa.qq.com/msgrd?
v=3&amp;uin=888888&amp;site=qq&amp;menu=yes" target="_Blank" rel="noopener noreferrer">
				<i class="iconfont icon-fankuijianyi"></i><br>反馈
			</a>
		</li>
		<li>
			<a class="float-border float-text" href="javascript:void(0);" etap="to_full" title="
点击全屏">
				<i class="iconfont icon-quanping"></i><br>全屏
			</a>
		</li>
		<li>
			<a class="float-border float-text tap-dark" href="javascript:void(0);" etap="tap-
dark" title="夜间模式">
				<i class="iconfont icon-ios-sunny"></i><br>切换
			</a>
		</li>

	</ul>

  	<ul class="float-ul float-radius float-text">
      <li>
<a class="float-border float-text" href="javascript:void(0);" etap="to_top" title="返回顶部">
				<i class="iconfont icon-top1"></i><br>
      
      
	</a>
		</li>
	</ul>

</div>

<script>
$(".qq").hover(function () {
	$(this).children(".float-qq-box").show()
},function() {
	$(this).children(".float-qq-box").hide()
});
$(".weixin").hover(function () {
	$(this).children(".float-weixin-box").show()
},function() {
	$(this).children(".float-weixin-box").hide()
});
</script>

<!--右侧跟随导航结束-->