1. html代码示例:
结构要点: 要显示的**侧边栏是按钮的子级 **
<div class="btn_slidebar">
显示侧边栏
<ul class="test_slidebar">
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
</ul>
</div>
2. css代码示例:
.btn_slidebar{
width:100px;
height: 40px;
background: rgb(78, 194, 233);
line-height: 40px;
color:#fff;
border-radius: 8px;
box-shadow: 4px 2px 4px #808e8f;
cursor: pointer;
}
.test_slidebar{
width:150px;
background: lightcoral;
margin-top:20px;
margin-left:-200px; /* 1. 初始,让侧边栏在屏幕外部 */
transition: margin-left 0.5s; /* 2. 让margin-left有一个过渡效果,看实际情况,如果用了定位,也可以控制定位的left 值 */
}
.btn_slidebar:hover .test_slidebar{ /* */
margin-left:0px; /* 3. 鼠标经过按钮的时候,让侧边栏回到原来的位置*/
}
鼠标移入后效果: