1.最终实现的效果图
2. 实现左侧菜单折叠与展开功能步骤
2.1 首先应该在菜单顶部放一个折叠展开的按钮条
2.2 接下来,画按钮条UI结构,实现折叠与展开功能
1. 在侧边栏内部,在侧边栏菜单区域之前,放置一个DIV。
2. 在该DIV上面添加文本,通过点击该DIV,触发菜单折叠与展开
3.通过类选择器,为该DIV 添加相关样式
.toggle-button{
// 添加背景颜色
background-color: #4A5064;
// 设置文本大小
font-size:10px;
// 设置文本行高
line-height:24px;
// 设置文本颜色
color:#fff;
// 设置文本居中
text-align: center;
// 设置文本间距
letter-spacing: 0.2em;
// 设置鼠标悬浮变小手效果
cursor:pointer;
}