终极效果图

第一步

html代码

对应的效果

html侧滑菜单web前端技巧零框架实现侧滑菜单就是这么简略 Python

效果图

第二步，添加导航菜单

html代码

对应的效果

效果图

第三步，给导航加上样式

CSS代码

就成这样了。

效果

第四步，须要把菜单隐蔽起来，让用户可以自己打开和关闭

把导航的宽度设置为0px。
达到隐蔽的效果。

css代码

第五步，添加打开和关闭的javascript代码

javascript代码

为了达到更好的效果，须要给正文加高下面这个样式

css代码

对应的效果，还不错！

效果

到这里，一个大略的侧滑菜单效果就完成了。
下次见！