admin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右侧小插件</title>
<link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
* {
font-size: 12px;
color: #333;
}
a {
cursor: pointer;
}
#side_box div.side {
position: fixed;
bottom: 100px;
right: 2%;
border: 1px solid #f1f1f1;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 10px 0 rgba(96, 96, 96, .8)
}
#side_box div.side div.back_top {
border-radius: 10px 10px 0 0;
overflow: hidden;
}
#side_box div.side div.back_top a {
display: inline-block;
width: 48px;
height: 44px;
text-align: center;
line-height: 44px;
background: #fff;
border-bottom: 1px solid #f1f1f1;
border-radius: 5px 5px 0 0;
overflow: hidden;
}
#side_box div.side div.back_top a i {
font-size: 22px;
color: #b3b3b3;
}
#side_box div.side div.back_top a:hover {
background: #2064ca;
}
#side_box div.side div.back_top a:hover i {
color: #fff;
}
#side_box div.side div.hide {
border-radius: 0 0 10px 10px;
overflow: hidden;
}
#side_box div.side div.hide a {
display: inline-block;
width: 48px;
height: 44px;
text-align: center;
line-height: 44px;
background: #fff;
border-top: 1px solid #f1f1f1;
border-radius: 0 0 5px 5px;
overflow: hidden;
}
#side_box div.side div.hide a i {
font-size: 22px;
color: #b3b3b3;
}
#side_box div.side div.hide a:hover {
background: #2064ca;
}
#side_box div.side div.hide a:hover i {
color: #fff;
}
#side_box div.side ul {
margin-top: 30px;
}
#side_box div.side ul li {
width: 48px;
height: 55px;
text-align: center;
font-size: 22px;
}
#side_box div.side ul li a {
width: 100%;
height: 100%;
display: block;
font-size: 12px;
color: #b3b3b3;
}
#side_box div.side ul li a div {
width: 25px;
height: 25px;
margin: 0 auto 5px;
background: #b3b3b3;
border-radius: 50%;
}
#side_box div.side ul li a i {
font-size: 16px;
line-height: 25px;
text-align: center;
color: #fff;
}
#side_box div.side ul li:nth-of-type(1) a:hover div {
background: #0f7a30;
}
#side_box div.side ul li:nth-of-type(2) a:hover div {
background: #188eee;
}
#side_box div.side ul li:nth-of-type(3) a:hover div {
background: #d59e26;
}
#side_box div.side ul li:nth-of-type(4) a:hover div {
background: #f95eff;
}
#side_box div.side ul li:nth-of-type(1) a:hover {
color: #0f7a30;
}
#side_box div.side ul li:nth-of-type(2) a:hover {
color: #188eee;
}
#side_box div.side ul li:nth-of-type(3) a:hover {
color: #d59e26;
}
#side_box div.side ul li:nth-of-type(4) a:hover {
color: #f95eff;
}
#side_box div.side li.wechat .wechat_window {
display: inline-block;
width: 175px;
height: 110px;
position: absolute;
left: -215px;
top: -25px;
padding: 10px 10px 0 10px;
background: #fff;
border: 1px solid #ccc;
display: none;
}
#side_box div.side ul li:nth-of-type(1) {
position: relative
}
#side_box div.side li .wechat_window::before {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 35px;
right: -10px;
padding: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 10px solid #fff;
display: block;
content: '';
z-index: 12;
}
#side_box div.side li .wechat_window::after {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 34px;
right: -12px;
padding: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 12px solid #ccc;
display: block;
content: '';
z-index: 10
}
#side_box div.side li .wechat_window i {
font-size: 100px;
}
</style>
</head>
<body>
<div style="width: 100%;height:3000px;"></div>
<div id="side_box" class="side_box">
<div class="side">
<div class="back_top">
<a class="back_to_top">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
</div>
<ul>
<li class="wechat">
<a>
<div><i class="fa fa-weixin" aria-hidden="true"></i></div>微信
</a>
<div class="wechat_window">
<i class="fa fa-qrcode" aria-hidden="true"></i>
</div>
</li>
<li><a>
<div><i class="fa fa-rss" aria-hidden="true"></i></div>订阅
</a></li>
<li><a>
<div><i class="fa fa-phone" aria-hidden="true"></i></div>咨询
</a></li>
<li><a>
<div><i class="fa fa-gift" aria-hidden="true"></i></div>套餐
</a></li>
</ul>
<div class="hide"><a><i class="fa fa-angle-double-down" aria-hidden="true"></i></a></div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
// 设置返回顶部方法
$('#side_box a.back_to_top').click(function () {
$("body,html").animate({ scrollTop: 0 }, 500);
return false;
})
//侧边栏显示微信二维码
$('#side_box li.wechat').mouseover(function () {
$(this).find('.wechat_window').show()
}).mouseleave(function () {
$(this).find('.wechat_window').hide()
})
// 设置隐藏菜单
$('#side_box div.hide a').click(function () {
if ($(this).hasClass('up')) {
$(this).removeClass('up');
$('#side_box .side ul').slideDown()
} else {
$(this).addClass('up');
$('#side_box .side ul').slideUp()
}
})
</script>
</body>
</html>功能：
- 回到顶部
- 隐藏菜单
