这种效果在大多数网站中都是常见的,屏幕右边有一列列表,鼠标放上去之后,列表弹窗就从右边滑出,因为常用自己写一下方便以后直接使用。
效果图
代码
<div class="donate-content-div">
<strong style="font-weight: bold"> <span id="donate-content-div">使用指南</span></strong>
<strong style="font-weight: bold"> <span id="content-div-title">搜索</span></strong>
<div class="content-titles" style="display: block;">
<div>
<p style="margin: 0 0 12.5px;">
我爱你中国
</p>
</div>
</div>
</div>
.donate-content-div:hover{transition:'0.3s all ease-in';right:0}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content-titles {
max-height: 428px;
position: relative;
overflow: auto;
}
span#content-div-title {
color: red;
}
span#donate-content-div {
position: absolute;
left: -63px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
width: auto;
background: #ffc82c;
height: auto;
top: 21px;
padding: 7px 14px;
border-radius: 15px;
color: #123464;
font-family: initial;
font-size: 18px;
}
.donate-content-div {
border: 1px solid #0099d6;
padding: 20px;
background-color: #f0f0f0;
display: inline-block;
width: 304px;
right: -304px;
position: fixed;
top: 40%;
z-index: 9999;
transition: right .35s ease-in-out;
}