效果展示及实现步骤分析tuozuai1.gif在实现过程代码中将左侧侧边栏称为sidebar功能实现todo点击sidebar下方关闭按钮(x)，sidebar向左方滑出屏幕，关闭按钮向右方滑动，同时旋转为(+)点击加号，sidebar向右滑动，(+)向左滑动，并旋转为(x)点击sidebar上的菜单栏，相应的内容栏(从左向右滑动)效果*，如果已经有打开的内容栏，则已打开的内容栏关闭，新点击的菜单...
效果展示及实现步骤分析
tuozuai1.gif
在实现过程代码中将左侧侧边栏称为sidebar
功能实现todo
点击sidebar下方关闭按钮(x)，sidebar向左方滑出屏幕，关闭按钮向右方滑动，同时旋转为(+)
点击加号，sidebar向右滑动，(+)向左滑动，并旋转为(x)
点击sidebar上的菜单栏，相应的内容栏(从左向右滑动)
效果*，如果已经有打开的内容栏，则已打开的内容栏关闭，新点击的菜单的相应内容栏从下向上滑动
打开的内容栏的右上方有关闭按钮(
完整性*。如果已经有打开的内容栏，点击sidebar下放的关闭按钮，则sidebar关闭，已经打开的内容栏也应该关闭。
实现步骤
实现html文档结构
编写js代码，添加相应的事件相应的函数逻辑
在每个事件函数中添加动画效果
用HTML+CSS实现侧边栏页面布局
sidebar_democss
ul {
list-style: none;
padding-left: 0;
}
#sidebar{ <
1049
4806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
