折叠式侧边栏的制作

今天学习了折叠式菜单栏的制作。本次制作用到了一点js,但整体而言还是使用css渲染。

使用svg来绘制图标

侧边栏项目


HTML代码

主题内容


main

运用js实现折叠拉伸效果


js实现折叠效果

css部分



css添加完之后的样式

@media进行页面缩放时,折叠菜单栏的变化


变化展示

代码展示


学习到的新内容

1.认识到svg是用线与坐标去绘制图标

2.opacity可以设置背景的透明度

你可能感兴趣的:(折叠式侧边栏的制作)