Html
    Css
    Js

    
                        
.sideBar {
	position:fixed;
	right:-182px;
	top:250px;
	background-color:#ffffff;
	border:#eea236 solid 1px;
	transition:right 0.5s;
}
.sideBar:hover {
	right:0;
}
.sideBar>div {
	position:relative;
}
.sideBar .tips {
	position:absolute;
	height:120px;
	line-height:25px;
	background-color:#eea236;
	width:40px;
	left:-40px;
	top:50px;
	text-align:center;
	box-sizing:border-box;
	padding:10px 10px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	font-weight:bold;
	color:#ffffff;
}
.sideBar .list {
	padding:0;
	list-style:none;
	width:180px;
	margin:0;
}
.sideBar .list>li {
	padding:15px;
	border-top:#eea236 dashed 1px;
}
.sideBar .list>li:hover {
	background-color:#f0ad4e;
	color:#ffffff;
}
.sideBar .list>li:first-child {
	border-top:none;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS边栏在线客服(原创)

7
      天津市依依卫生用品有限公0
      2018/9/18 21:43:43
      改个Q名吧0
      2018/9/11 19:32:40
      J.Flay0
      2018/9/10 18:04:40
      萌、沐兮╂0
      2018/9/1 23:30:09
      达康书记!0
      2018/8/30 14:28:35
      黄河爱浪0
      2018/8/29 10:07:58
      距离顶部的问题,修改 .sidebar 的 top 属性。因当前预览窗口的问题,可复制代码到本地查看效果 回复
      freet0
      2018/8/29 10:03:48